/* Inner marketing content pages — Cloubotix theme1 */
.theme-page {
  padding-top: 96px;
  padding-bottom: 64px;
  min-height: 60vh;
}

.theme-page-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.theme-page-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
}

.theme-page-hero .section-title,
.theme-page-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.5px;
  color: #1a1a2e;
}

.theme-page-hero .section-description {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1.125rem;
  color: #6b6b8a;
}

/* Brand Box — clearer display + body type */
.theme-brandbox.theme-page-hero .theme-page-eyebrow {
  font-family: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
}

.theme-brandbox.theme-page-hero .section-title {
  font-family: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.theme-brandbox.theme-page-hero .section-description {
  font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  max-width: 36rem;
}

.theme-brandbox .feature-card .feature-title {
  font-family: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.theme-brandbox .feature-card .feature-description {
  font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  font-weight: 500;
  line-height: 1.65;
}

.theme-brandbox .cta-note {
  font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
}

.theme-page-body {
  padding: 24px 0 48px;
}

/* Hero inline CTA (product pages that put CTA in the hero) */
.theme-hero-inline-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* Multi-business band: tinted section between hero and features */
.theme-biz-band {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 55%, #fdf4ff 100%);
  border-top: 1px solid rgba(37, 99, 235, 0.07);
  border-bottom: 1px solid rgba(37, 99, 235, 0.07);
  padding: 56px 0;
}
.theme-biz-band__head {
  text-align: center;
  margin-bottom: 36px;
}
.theme-biz-band__head .section-title { margin-bottom: 10px; }
.theme-biz-band__head .section-description { color: #6b6b8a; }

/* Section heading inside body (smaller, left-aligned on desktop) */
.theme-section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.3px;
  text-align: center;
  margin: 0 0 32px;
}

.theme-page .section-more {
  margin-top: 16px;
}

.theme-page .section-more a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.theme-page .section-more a:hover {
  text-decoration: underline;
}

.theme-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .theme-compare {
    grid-template-columns: 1fr;
  }
}

.theme-compare-col {
  padding: 28px;
  border-radius: 20px;
  background: #fafbff;
  border: 1px solid rgba(37, 99, 235, 0.08);
}

.theme-compare-col--with {
  background: linear-gradient(160deg, #eff6ff 0%, #f8fafc 100%);
  border-color: rgba(37, 99, 235, 0.2);
}

.theme-compare-col h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: #1a1a2e;
}

.theme-compare-col .theme-compare-intro {
  margin: 0 0 20px;
  color: #6b6b8a;
  font-size: 0.9375rem;
}

.theme-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.theme-compare-list li {
  padding: 12px 0;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
}

.theme-compare-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.theme-compare-list strong {
  display: block;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.theme-compare-list span {
  display: block;
  font-size: 0.875rem;
  color: #6b6b8a;
  line-height: 1.45;
}

.theme-compare-step {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2563eb;
}

.theme-compare-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(37, 99, 235, 0.25);
  font-size: 0.9375rem;
  color: #1e3a8a;
}

/* --- Interactive journey: old way vs BusinessCloud --- */
.theme-journey {
  margin-top: 48px;
  padding: 8px 0 16px;
}

.theme-how-only .theme-journey {
  margin-top: 0;
}

.theme-bizcloud-only {
  padding-top: 48px;
}

.theme-bizcloud-only .theme-section-heading {
  margin-bottom: 40px;
}

.theme-journey__intro {
  padding-top: 48px;
  padding-bottom: 20px;
}

.theme-journey__toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 8px auto 28px;
}

.theme-journey__old-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1.5px solid rgba(22, 163, 74, 0.45);
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  box-shadow: 0 8px 24px -16px rgba(21, 128, 61, 0.4);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #334155;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.theme-journey__old-toggle:hover {
  border-color: rgba(22, 163, 74, 0.65);
  box-shadow: 0 10px 28px -14px rgba(22, 163, 74, 0.4);
}

.theme-journey__old-toggle.is-on {
  border-color: rgba(22, 163, 74, 0.55);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.theme-journey__old-toggle.is-off {
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(135deg, #fff7f7 0%, #fff1f2 100%);
  box-shadow: 0 8px 24px -16px rgba(239, 68, 68, 0.4);
}

.theme-journey__old-toggle.is-off:hover {
  border-color: rgba(239, 68, 68, 0.7);
  box-shadow: 0 10px 28px -14px rgba(239, 68, 68, 0.4);
}

.theme-journey__old-toggle-switch {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.theme-journey__old-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
  transition: transform 0.2s ease;
}

.theme-journey__old-toggle.is-on .theme-journey__old-toggle-switch {
  background: #16a34a;
}

.theme-journey__old-toggle.is-on .theme-journey__old-toggle-switch::after {
  transform: translateX(20px);
}

.theme-journey__old-toggle.is-off .theme-journey__old-toggle-switch {
  background: #ef4444;
}

.theme-journey__old-toggle.is-off .theme-journey__old-toggle-switch::after {
  transform: translateX(0);
}

.theme-journey__old-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.theme-journey__old-toggle-copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.theme-journey__old-toggle-copy span {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.35;
}

.theme-journey[data-mode="new"] .theme-journey__board {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.theme-journey__switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 28px;
  max-width: 720px;
}

.theme-journey__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-journey__tab:hover {
  border-color: rgba(37, 99, 235, 0.35);
}

.theme-journey__tab.is-active {
  background: #1e3a8a;
  border-color: #1e3a8a;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.55);
}

.theme-journey__tab-icon {
  font-size: 1rem;
  line-height: 1;
}

.theme-journey__tab-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
}

.theme-journey__tab.is-active .theme-journey__tab-badge {
  background: rgba(255, 255, 255, 0.18);
}

.theme-journey__tab-badge--good {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.theme-journey__tab.is-active .theme-journey__tab-badge--good {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.theme-journey__tab--both {
  min-width: 96px;
  justify-content: center;
}

.theme-journey__board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}

.theme-journey[data-mode="old"] .theme-journey__board,
.theme-journey[data-mode="new"] .theme-journey__board {
  grid-template-columns: 1fr;
}

.theme-journey[data-mode="old"] .theme-journey__pane--new,
.theme-journey[data-mode="old"] .theme-journey__vs,
.theme-journey[data-mode="new"] .theme-journey__pane--old,
.theme-journey[data-mode="new"] .theme-journey__vs {
  display: none;
}

.theme-journey__pane {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.theme-journey__pane--old {
  background:
    radial-gradient(circle at 12% 18%, rgba(248, 113, 113, 0.18), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(251, 146, 60, 0.14), transparent 40%),
    linear-gradient(165deg, #fff7f5 0%, #f8fafc 100%);
  border: 1px solid rgba(239, 68, 68, 0.16);
}

.theme-journey__pane--new {
  background:
    radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.2), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(37, 99, 235, 0.12), transparent 40%),
    linear-gradient(165deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid rgba(37, 99, 235, 0.22);
  box-shadow: 0 18px 40px -24px rgba(37, 99, 235, 0.45);
}

.theme-journey__pane-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.theme-journey__pane-head h2,
.theme-journey__pane-head h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #1a1a2e;
  line-height: 1.15;
}

.theme-journey__pane--new .theme-journey__pane-head h2 {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  letter-spacing: -0.02em;
}

.theme-journey__pane-head p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
}

.theme-journey__meter {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.theme-journey__meter--chaos {
  background: linear-gradient(145deg, #fee2e2 0%, #ffedd5 100%);
  color: #b91c1c;
}

.theme-journey__meter--calm {
  background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
}

.theme-journey__meter-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.theme-journey__meter-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.theme-journey__vs {
  align-self: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.55);
  z-index: 2;
}

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

.theme-journey__chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font: inherit;
  color: inherit;
  opacity: 0;
  transform: translateY(12px) rotate(calc((var(--chip-i, 0) % 3 - 1) * 1.2deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.theme-journey.is-revealed .theme-journey__chip {
  opacity: 1;
  transform: translateY(0) rotate(calc((var(--chip-i, 0) % 3 - 1) * 1.2deg));
  transition-delay: calc(var(--chip-i, 0) * 40ms);
}

.theme-journey__chip:hover,
.theme-journey__chip.is-open {
  transform: translateY(-3px) rotate(0deg) scale(1.02);
  border-color: rgba(239, 68, 68, 0.28);
  box-shadow: 0 14px 28px -16px rgba(185, 28, 28, 0.35);
  background: #fff;
  z-index: 1;
}

.theme-journey__chip-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  line-height: 1;
  background: linear-gradient(145deg, #fff1f2 0%, #ffedd5 100%);
}

.theme-journey__chip-body {
  min-width: 0;
}

.theme-journey__chip-body strong {
  display: block;
  font-size: 0.875rem;
  color: #1a1a2e;
  margin-bottom: 2px;
}

.theme-journey__chip-body span {
  display: none;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
}

.theme-journey__chip.is-open .theme-journey__chip-body span,
.theme-journey__chip:focus-visible .theme-journey__chip-body span {
  display: block;
}

.theme-journey__path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.theme-journey__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  opacity: 0;
  transform: translateY(12px);
}

.theme-journey.is-revealed .theme-journey__step {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: calc(0.15s + var(--step-i, 0) * 0.12s);
}

.theme-journey__step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.theme-journey__step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #1d4ed8 0%, #3b82f6 100%);
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.7);
}

.theme-journey__step-line {
  display: none;
}

.theme-journey__step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 0;
  height: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 10px 24px -18px rgba(37, 99, 235, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-journey__step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -16px rgba(37, 99, 235, 0.4);
}

.theme-journey__step-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  line-height: 1;
  background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.theme-journey__step-card strong {
  display: block;
  font-size: 0.9375rem;
  color: #1a1a2e;
  margin-bottom: 2px;
}

.theme-journey__step-card > div > span {
  display: block;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.4;
}

.theme-journey__note {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px dashed rgba(37, 99, 235, 0.28);
  color: #1e3a8a;
  font-size: 0.875rem;
  font-weight: 500;
}

.theme-journey__closing {
  margin: 32px auto 0;
  max-width: 520px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e3a8a;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

@media (max-width: 960px) {
  .theme-journey__board {
    grid-template-columns: 1fr;
  }

  .theme-journey__vs {
    display: none;
  }

  .theme-journey[data-mode="split"] .theme-journey__pane--old {
    order: 1;
  }

  .theme-journey[data-mode="split"] .theme-journey__pane--new {
    order: 2;
  }
}

@media (max-width: 900px) {
  .theme-journey__chaos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .theme-journey__path {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .theme-journey__chaos {
    grid-template-columns: 1fr;
  }

  .theme-journey__pane-head {
    flex-direction: column;
  }

  .theme-journey__tab-label {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.theme-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

@media (max-width: 1100px) {
  .theme-points {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .theme-points {
    grid-template-columns: 1fr;
  }
}

.theme-point {
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}

.theme-point__icon {
  font-size: 1.75rem;
  margin-bottom: 10px;
}

.theme-point h3 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  color: #1a1a2e;
}

.theme-point p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b6b8a;
  line-height: 1.45;
}

.theme-solutions-hero {
  position: relative;
  padding: 56px 0 40px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(37, 99, 235, 0.12), transparent 60%),
    linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.theme-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .theme-industry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .theme-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .theme-industry-grid {
    grid-template-columns: 1fr;
  }
}

.theme-industry-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.1);
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.theme-industry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 18px 36px -16px rgba(37, 99, 235, 0.28);
}

.theme-industry-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.theme-industry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.5rem;
  line-height: 1;
  background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.theme-industry-card h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a1a2e;
  line-height: 1.25;
}

.theme-industry-card > p {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.4;
}

.theme-industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.theme-industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.75rem;
  font-weight: 500;
  color: #334155;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-industry-card:hover .theme-industry-tag {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.14);
  color: #1e3a8a;
}

.theme-solutions-closing {
  margin-top: 40px;
  padding: 18px 24px;
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  font-size: 1rem;
  font-weight: 500;
  color: #1e3a8a;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.theme-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .theme-two-col {
    grid-template-columns: 1fr;
  }
}

.theme-panel {
  padding: 28px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.15);
}

.theme-panel h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  color: #1a1a2e;
}

.theme-panel > p {
  margin: 0 0 16px;
  color: #6b6b8a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.theme-stage-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.theme-stage-list li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
}

@media (max-width: 640px) {
  .theme-stage-list li {
    grid-template-columns: 48px 1fr;
  }
  .theme-stage-list .theme-stage-tier {
    grid-column: 2;
  }
}

.theme-stage-num {
  font-weight: 800;
  color: #2563eb;
  font-size: 1.125rem;
}

.theme-stage-list h3 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  color: #1a1a2e;
}

.theme-stage-list p {
  margin: 0;
  color: #6b6b8a;
  font-size: 0.9rem;
  line-height: 1.45;
}

.theme-stage-tier {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1e40af;
  background: #eff6ff;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.theme-page-cta {
  margin-top: 48px;
  text-align: center;
}

.theme-page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.theme-page-cta .cta-note {
  margin-top: 12px;
  color: #6b6b8a;
  font-size: 0.875rem;
}

.theme-closing {
  margin-top: 36px;
  text-align: center;
  font-size: 1.0625rem;
  color: #334155;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.theme-doc {
  max-width: 880px;
  margin: 0 auto;
}

.theme-doc-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 36px;
  text-align: center;
}

.theme-doc-updated {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: #64748b;
}

.theme-doc-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 720px) {
  .theme-doc-points {
    grid-template-columns: 1fr;
  }
}

.theme-doc-points--contact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .theme-doc-points--contact {
    grid-template-columns: 1fr;
  }
}

.theme-doc-point {
  background: #fff;
  border: 1.5px solid #e8e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.theme-doc-point__icon {
  font-size: 1.75rem;
  margin-bottom: 10px;
  line-height: 1;
}

.theme-doc-point h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  color: #0f172a;
}

.theme-doc-point p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.theme-doc-point__cta {
  margin-top: 16px !important;
}

.theme-doc-note {
  margin: 28px auto 0;
  max-width: 560px;
  text-align: center;
  color: #64748b;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.theme-doc--legal .theme-doc-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eef2f7;
}

.theme-doc--legal .theme-doc-section:last-of-type {
  border-bottom: none;
}

.theme-doc--legal h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #0f172a;
}

.theme-doc--legal p {
  margin: 0;
  color: #475569;
  line-height: 1.75;
  font-size: 0.9875rem;
}

.theme-explore-link {
  margin: 40px 0 8px;
  text-align: center;
}

.theme-explore-link a {
  display: inline-block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.theme-explore-link a:hover {
  text-decoration: underline;
}

.theme-product-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .theme-product-links {
    grid-template-columns: 1fr;
  }
}

.theme-product-link {
  display: block;
  padding: 24px;
  border-radius: 18px;
  background: #fafbff;
  border: 1px solid rgba(37, 99, 235, 0.1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-product-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  font-size: 1.5rem;
  line-height: 1;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.2);
}

.theme-product-link__icon svg,
.theme-product-link__icon .theme-product-icon {
  width: 34px;
  height: 34px;
  display: block;
}

.theme-product-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -12px rgba(37, 99, 235, 0.25);
}

.theme-product-link:hover .theme-product-link__icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.28);
}

.theme-product-link__icon {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Vivid platform cards */
.theme-product-links--vivid {
  gap: 22px;
}

.theme-product-link--panel {
  background: linear-gradient(155deg, #eff6ff 0%, #dbeafe 48%, #bfdbfe 100%);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 28px -16px rgba(37, 99, 235, 0.45);
}

.theme-product-link--panel .theme-product-link__icon {
  background: linear-gradient(160deg, #ffffff 0%, #dbeafe 100%);
  border-color: rgba(37, 99, 235, 0.18);
}

.theme-product-link--panel .theme-page-eyebrow,
.theme-product-link--panel span.theme-page-eyebrow {
  color: #1d4ed8;
}

.theme-product-link--brand {
  background: linear-gradient(155deg, #fff7ed 0%, #ffedd5 48%, #fdba74 100%);
  border-color: rgba(234, 88, 12, 0.28);
  box-shadow: 0 10px 28px -16px rgba(234, 88, 12, 0.4);
}

.theme-product-link--brand .theme-product-link__icon {
  background: linear-gradient(160deg, #ffffff 0%, #ffedd5 100%);
  border-color: rgba(234, 88, 12, 0.2);
}

.theme-product-link--brand .theme-page-eyebrow,
.theme-product-link--brand span.theme-page-eyebrow {
  color: #c2410c;
}

.theme-product-link--suite {
  background: linear-gradient(155deg, #f5f3ff 0%, #ede9fe 48%, #c4b5fd 100%);
  border-color: rgba(109, 40, 217, 0.28);
  box-shadow: 0 10px 28px -16px rgba(109, 40, 217, 0.4);
}

.theme-product-link--suite .theme-product-link__icon {
  background: linear-gradient(160deg, #ffffff 0%, #ede9fe 100%);
  border-color: rgba(109, 40, 217, 0.2);
}

.theme-product-link--suite .theme-page-eyebrow,
.theme-product-link--suite span.theme-page-eyebrow {
  color: #6d28d9;
}

.theme-product-links--vivid .theme-product-link h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.theme-product-links--vivid .theme-product-link p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
  margin-bottom: 0;
}

.theme-product-link--panel:hover {
  box-shadow: 0 16px 36px -12px rgba(37, 99, 235, 0.45);
}

.theme-product-link--brand:hover {
  box-shadow: 0 16px 36px -12px rgba(234, 88, 12, 0.4);
}

.theme-product-link--suite:hover {
  box-shadow: 0 16px 36px -12px rgba(109, 40, 217, 0.4);
}

.theme-home-products {
  padding: 64px 0 72px;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.theme-home-products .section-header {
  margin-bottom: 36px;
}

.feature-card-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2563eb;
}

.theme-product-link .theme-page-eyebrow {
  margin-bottom: 8px;
}

.theme-product-link h3 {
  margin: 0 0 8px;
  color: #1a1a2e;
}

.theme-product-link p {
  margin: 0 0 12px;
  color: #6b6b8a;
  font-size: 0.9rem;
}

.theme-product-link span {
  color: #2563eb;
  font-weight: 600;
  font-size: 0.875rem;
}

.section-more {
  margin-top: 12px;
}

.section-more a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.section-more a:hover {
  text-decoration: underline;
}

.section-more--cta {
  margin-top: 20px;
}

.section-more--cta a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  padding: 12px 28px;
  min-width: 8.5rem;
}

.section-more--cta a.btn-primary:hover {
  text-decoration: none;
  color: #fff;
}

/* ===================================================
   Pricing page
   =================================================== */
.pricing-cpms-note {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 0.875rem;
  color: #475569;
}

.pricing-cpms-note a {
  color: #2563eb;
  font-weight: 500;
}

.pricing-gst-note {
  margin: 10px auto 0;
  max-width: 600px;
  font-size: 0.8125rem;
  color: #78350f;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 14px;
  display: inline-block;
}

/* — free callout — */
.pricing-free-callout {
  padding: 56px 0;
  background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 40%, #eff6ff 100%);
  border-top: 1px solid rgba(22, 163, 74, 0.1);
  border-bottom: 1px solid rgba(22, 163, 74, 0.1);
}

.pricing-free-callout__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .pricing-free-callout__inner { grid-template-columns: 1fr; gap: 32px; }
}

.pricing-free-callout__head { text-align: left; }
.pricing-free-callout__head .section-title { margin-bottom: 12px; color: #14532d; }
.pricing-free-callout__head .section-description { margin: 0; max-width: 400px; color: #166534; }

.pricing-free-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 560px) {
  .pricing-free-perks { grid-template-columns: 1fr; }
}

.pricing-free-perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(22, 163, 74, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-free-perk:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(22, 163, 74, 0.4);
}

.pricing-free-perk__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
}

.pricing-free-perk strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 2px;
}

.pricing-free-perk span {
  font-size: 0.8125rem;
  color: #166534;
  line-height: 1.4;
}

/* — plan card extras — */
.pricing-plan-icon { font-size: 2rem; line-height: 1; margin-bottom: 8px; }

.pricing-card-note {
  margin: 8px 0 12px;
  font-size: 0.8125rem;
  color: #475569;
  font-style: italic;
}

.pricing-cta-note {
  margin-top: 20px;
  text-align: center;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.pricing--simple {
  padding-top: 24px;
}

/* Card chrome / badge / hover: assets/pricing-cards.css (older 1234 look) */

.pricing-simple-footnote {
  margin: 36px auto 0;
  max-width: 420px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #64748b;
}

.pricing-simple-footnote a {
  display: inline-block;
  margin-top: 8px;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.pricing-simple-footnote a:hover {
  text-decoration: underline;
}

.feature-item--strong span {
  font-weight: 700;
  color: #1a1a2e;
}

/* — multi-year savings strip — */
.pricing-multiyear-section {
  padding: 40px 0;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border-top: 1px solid rgba(37, 99, 235, 0.1);
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
  text-align: center;
}

.pricing-multiyear-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
  letter-spacing: -0.2px;
}

.pricing-multiyear-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pricing-myr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  min-width: 110px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pricing-myr-item--discount {
  border-color: rgba(22, 163, 74, 0.3);
  background: #f0fdf4;
}

.pricing-myr-years {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 500;
}

.pricing-myr-badge {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #1a1a2e;
}

.pricing-myr-item--discount .pricing-myr-badge {
  color: #15803d;
}

.pricing-myr-text {
  font-size: 0.75rem;
  color: #64748b;
  text-align: center;
}

.pricing-myr-item--discount .pricing-myr-text {
  color: #15803d;
  font-weight: 600;
}

.pricing-multiyear-note {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

@media (max-width: 540px) {
  .pricing-multiyear-strip { gap: 8px; }
  .pricing-myr-item { min-width: 88px; padding: 10px 12px; }
}

/* — comparison table — */
.pricing-compare-section {
  padding: 56px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.pricing-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  box-shadow: 0 12px 40px -24px rgba(15, 23, 42, 0.15);
}

.pricing-compare-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.pricing-compare-table thead th {
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid rgba(37, 99, 235, 0.1);
  background: #fafbff;
  white-space: nowrap;
}

.pricing-compare-feature-col { text-align: left !important; width: 38%; color: #1a1a2e; }
.pricing-compare-plan-col { color: #334155; }
.pricing-compare-plan-col--highlight {
  background: linear-gradient(180deg, #eff6ff 0%, #fafbff 100%) !important;
  color: #1d4ed8 !important;
}

.pricing-compare-group-row td {
  padding: 12px 20px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  background: #f8fafc;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.pricing-compare-table tbody tr:not(.pricing-compare-group-row):hover td {
  background: rgba(239, 246, 255, 0.55);
}

.pricing-compare-table td {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: middle;
}

.pricing-compare-label { color: #334155; font-size: 0.875rem; }
.pricing-compare-cell { text-align: center; }
.pricing-compare-cell--highlight { background: rgba(239, 246, 255, 0.35); }
.pricing-check { display: inline-block; vertical-align: middle; }
.pricing-dash { color: #cbd5e1; font-weight: 700; font-size: 1.1rem; }
.pricing-text-cell { font-size: 0.8125rem; color: #475569; font-weight: 500; }

/* — FAQ — */
.pricing-faq-section { padding: 56px 0; }

.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pricing-faq-grid { grid-template-columns: 1fr; }
}

.pricing-faq-item {
  padding: 18px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.1);
  box-shadow: 0 6px 20px -14px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-faq-item[open] {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 12px 28px -16px rgba(37, 99, 235, 0.28);
}

.pricing-faq-q {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a2e;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pricing-faq-q::-webkit-details-marker { display: none; }

.pricing-faq-q::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 400;
  color: #2563eb;
  transition: transform 0.2s ease;
  line-height: 1;
}

.pricing-faq-item[open] .pricing-faq-q::after {
  transform: rotate(45deg);
}

.pricing-faq-a {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
}

/* =============================================================
   Device Scene — Hero (homepage) v2 — realistic
   ============================================================= */

/* ── Scene container ── */
/* ── Scene with ambient glow pools ── */
.dev-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  height: 360px;
}
.dev-scene::before {
  content: '';
  position: absolute;
  width: 380px; height: 300px;
  background: radial-gradient(ellipse, rgba(37,99,235,.13) 0%, transparent 65%);
  top: 20px; left: -30px;
  pointer-events: none;
}
.dev-scene::after {
  content: '';
  position: absolute;
  width: 240px; height: 260px;
  background: radial-gradient(ellipse, rgba(124,58,237,.1) 0%, transparent 65%);
  top: 5px; right: -20px;
  pointer-events: none;
}

/* ── Scroll animation ── */
@keyframes devScroll {
  0%,  12% { transform: translateY(0); }
  45%, 58% { transform: translateY(-52%); }
  88%,100% { transform: translateY(0); }
}
.dev-sw {
  display: flex; flex-direction: column; gap: 5px; padding: 5px;
  animation: devScroll var(--ds, 10s) ease-in-out infinite var(--dd, 0s);
  will-change: transform;
}
.dev-sw-dash { --ds: 10s; --dd: 0s;  }
.dev-sw-site { --ds: 12s; --dd: -3s; }
.dev-sw-mob  { --ds:  8s; --dd: -1.5s; }

/* ─────────────────── SCREEN-CYCLING RAIL (GIF-like flip) ─────────────────── */
@keyframes devCycle {
  0%, 36%   { transform: translateY(0);   }
  44%, 88%  { transform: translateY(-50%); }
  96%, 100% { transform: translateY(0);   }
}

/* Rail: stacks two full-height slides, animated to flip between them */
.dev-screen-rail {
  display: flex;
  flex-direction: column;
  height: 200%;
  animation: devCycle 14s cubic-bezier(0.4, 0, 0.2, 1) infinite var(--dd, 0s);
  will-change: transform;
}

.dev-slide {
  flex: 0 0 50%;
  overflow: hidden;
}

/* Layout slide: sidebar+main need the flex context */
.dev-slide--layout {
  display: flex;
  flex-direction: column;
}
.dev-slide--layout > .dev-dash-layout {
  flex: 1;
  min-height: 0;
}

/* Suppress the per-content devScroll inside rail slides */
.dev-slide .dev-sw { animation: none; }

/* (laptop/monitor website slide + photo-hero — defined below near photo-hero block) */

/* ── Tablet: dashboard slide wrapper ── */
.dev-sw-tab-dash {
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: #f8fafc; height: 100%; overflow: hidden;
}

/* ── Phone: mobile dashboard slide wrapper ── */
.dev-sw-mob-dash {
  display: flex; flex-direction: column; gap: 4px; padding: 5px;
  background: #f8fafc; height: 100%; overflow: hidden;
}

/* Mobile dashboard — summary card */
.dev-mob-summary-card {
  background: linear-gradient(135deg, #1d4ed8, #6d28d9);
  border-radius: 7px; padding: 6px 7px;
  box-shadow: 0 4px 12px rgba(37,99,235,.38);
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 auto;
}
.dev-mob-summary-val {
  display: block; font-size: 11px; font-weight: 800;
  color: #fff; font-style: normal;
}
.dev-mob-summary-label {
  display: block; font-size: 4.5px; color: rgba(255,255,255,.75);
}

/* Mini sparkline inside summary card */
.dev-mob-sparkline {
  display: flex; align-items: flex-end; gap: 2px;
  height: 14px; margin-top: 4px;
}
.dev-mob-spark-bar {
  flex: 1; height: var(--sh, 50%);
  background: rgba(255,255,255,.3);
  border-radius: 2px 2px 0 0;
}
.dev-mob-spark-bar.hi { background: rgba(255,255,255,.85); }

/* Mobile KPI row */
.dev-mob-kpi-row {
  display: flex; gap: 4px; flex: 0 0 auto;
}
.dev-mob-kpi-cell {
  flex: 1; padding: 4px 2px; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center;
}
.dev-mob-kpi-cell strong { font-size: 7px; font-weight: 700; color: #fff; font-style: normal; }
.dev-mob-kpi-cell small  { font-size: 4px; color: rgba(255,255,255,.8); }
.dev-mob-kpi-cell.blue  { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.dev-mob-kpi-cell.green { background: linear-gradient(135deg, #047857, #10b981); }

/* ── Float keyframes — flat front-facing, gentle bob only ── */
@keyframes devFloatL {
  0%,100% { transform: translateY(0);   }
  50%     { transform: translateY(-5px); }
}
@keyframes devFloatT {
  0%,100% { transform: translateY(0);   }
  50%     { transform: translateY(-4px); }
}
@keyframes devFloatP {
  0%,100% { transform: translateY(0);   }
  50%     { transform: translateY(-6px); }
}

/* ── Soft ground shadows under each device ── */
.dev-ground {
  position: absolute;
  height: 16px;
  background: radial-gradient(ellipse, rgba(15,23,42,.25) 0%, transparent 70%);
  filter: blur(5px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
/* Grounds: monitor (centre-back), laptop (right-front), tablet (left-front), phone (centre-front) */
.dev-ground-m { width: 260px; left: 175px; bottom: 145px; }
.dev-ground-l { width: 250px; right: 10px; left: auto; bottom: 18px; }
.dev-ground-t { width: 130px; left: 78px;  right: auto; bottom: 42px; }
.dev-ground-p { width: 72px;  left: 168px; right: auto; bottom: 2px; }

/* ─────────────────── DESKTOP MONITOR ─────────────────── */
.dev-monitor {
  position: absolute;
  left: 170px; top: 8px;
  width: 280px;
  z-index: 1;
  animation: devFloatL 8s ease-in-out infinite;
  animation-delay: -4s;
}
.dev-monitor-bezel {
  background: linear-gradient(180deg, #3a3f4a 0%, #252b33 60%, #1c2028 100%);
  border-radius: 9px 9px 0 0;
  padding: 7px 7px 7px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.3);
}
.dev-monitor .dev-cam-dot { margin: 0 auto 4px; }
.dev-monitor .dev-screen  { height: 148px; border-radius: 3px; }
.dev-monitor-neck {
  width: 24px; height: 22px;
  background: linear-gradient(180deg, #3a3f4a, #252b33);
  margin: 0 auto;
}
.dev-monitor-base {
  width: 92px; height: 9px;
  background: linear-gradient(180deg, #4a505c, #2c3140);
  border-radius: 0 0 6px 6px;
  margin: 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 4px 12px rgba(0,0,0,.3),
    0 14px 36px rgba(0,0,0,.2);
}

/* ─────────────────── LAPTOP ─────────────────── */
.dev-laptop {
  position: absolute;
  right: 6px; top: 92px;
  left: auto;
  width: 248px;
  z-index: 3;
  animation: devFloatL 6s ease-in-out infinite;
}

.dev-laptop-bezel {
  background: linear-gradient(180deg, #3a3f4a 0%, #262b33 60%, #1d222a 100%);
  border-radius: 12px 12px 0 0;
  padding: 8px 8px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.35);
}

.dev-cam-dot {
  width: 5px; height: 5px;
  background: #2c3344;
  border-radius: 50%;
  margin: 0 auto 5px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 0 2px rgba(0,0,0,.6);
}
.dev-cam-sm { width: 4px; height: 4px; }

/* Screen: inner shadow + top glare */
.dev-screen {
  background: #eef2f7;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.dev-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,
    rgba(255,255,255,.2) 0%,
    rgba(255,255,255,.07) 28%,
    transparent 52%);
  pointer-events: none;
  z-index: 20;
  border-radius: inherit;
}
.dev-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.09),
    inset 0 2px 6px rgba(0,0,0,.07);
  z-index: 21;
  pointer-events: none;
  border-radius: inherit;
}

.dev-laptop .dev-screen { height: 148px; }

.dev-laptop-hinge {
  background: linear-gradient(to bottom, #2c3140, #1a1e25);
  height: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* MacBook-style front deck: wider than the lid */
.dev-laptop-base {
  background: linear-gradient(180deg, #4a505c 0%, #343a44 45%, #262b33 100%);
  height: 10px;
  margin: 0 -16px;
  border-radius: 3px 3px 12px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 4px 10px rgba(0,0,0,.25),
    0 14px 36px rgba(0,0,0,.2),
    0 28px 56px rgba(0,0,0,.12);
}

/* Thumb-notch on deck front edge */
.dev-trackpad {
  width: 52px; height: 5px;
  background: linear-gradient(to bottom, #1d222a, #2c3140);
  border-radius: 0 0 8px 8px;
  border: none;
}

/* ── ERP sidebar + main layout ── */
.dev-dash-layout {
  display: flex;
  height: 100%;
}

.dev-sidebar {
  width: 28px;
  background: linear-gradient(180deg, #0f172a 0%, #1a2540 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 0 6px;
  gap: 5px;
  flex-shrink: 0;
}
.dev-sb-logo {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #3b82f6, #6d28d9);
  border-radius: 4px;
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(37,99,235,.4);
}
.dev-sb-item {
  display: block; width: 16px; height: 5px;
  background: rgba(148,163,184,.2);
  border-radius: 3px;
}
.dev-sb-item.active { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,.5); }
.dev-sb-spacer { flex: 1; }
.dev-sb-avatar {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(96,165,250,.3);
}

.dev-main { flex: 1; overflow: hidden; background: #f8fafc; }

.dev-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 5px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dev-tb-title { width: 52px; height: 5px; background: #cbd5e1; border-radius: 3px; }
.dev-tb-search {
  width: 32px; height: 7px;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px;
}

/* KPI cards */
.dev-kpis { display: flex; gap: 4px; }
.dev-kpi {
  flex: 1; padding: 5px 4px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
}
.dev-kpi strong { font-size: 7px; font-weight: 700; color: #fff; font-style: normal; }
.dev-kpi small  { font-size: 5px; color: rgba(255,255,255,.8); margin-top: 1px; }
.dev-kpi-blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.dev-kpi-green  { background: linear-gradient(135deg, #047857, #10b981); }
.dev-kpi-purple { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.dev-kpi-teal   { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.dev-kpi-orange { background: linear-gradient(135deg, #c2410c, #f97316); }

/* Bar chart */
.dev-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 38px; padding: 4px 3px 3px;
  background: #fff; border-radius: 6px;
  border: 1px solid #e8edf3;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dev-bar {
  flex: 1;
  height: var(--bh, 50%);
  background: #bfdbfe;
  border-radius: 3px 3px 1px 1px;
}
.dev-bar.hi {
  background: linear-gradient(to top, #1d4ed8, #60a5fa);
  box-shadow: 0 -2px 8px rgba(37,99,235,.35);
}

/* Table rows */
.dev-rows { display: flex; flex-direction: column; gap: 3px; }
.dev-row {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 2px 3px;
  background: #fff; border-radius: 3px;
  border: 1px solid #f1f5f9;
}
.dev-rl { height: 4px; background: #e2e8f0; border-radius: 2px; display: block; }
.dev-rl.w80 { width: 80%; } .dev-rl.w70 { width: 70%; } .dev-rl.w65 { width: 65%; }
.dev-rl.w60 { width: 60%; } .dev-rl.w55 { width: 55%; } .dev-rl.w50 { width: 50%; }
.dev-rl.w45 { width: 45%; }

.dev-tag {
  font-size: 4px; font-weight: 700; padding: 1.5px 4px;
  border-radius: 8px; white-space: nowrap;
}
.dev-tag.green  { background: #dcfce7; color: #166534; }
.dev-tag.blue   { background: #dbeafe; color: #1e40af; }
.dev-tag.orange { background: #ffedd5; color: #9a3412; }

/* Donut (pie) + line graph row */
.dev-charts-row { display: flex; gap: 4px; align-items: stretch; }
.dev-donut-card {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px;
  background: #fff; border: 1px solid #e8edf3; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dev-donut {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: conic-gradient(#3b82f6 0 42%, #8b5cf6 42% 68%, #10b981 68% 87%, #f59e0b 87% 100%);
  flex: 0 0 auto;
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
}
.dev-donut::after {
  content: '';
  position: absolute; inset: 28%;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 2px rgba(0,0,0,.12);
}
.dev-donut-sm { width: 28px; height: 28px; }
.dev-legend { display: flex; flex-direction: column; gap: 3px; }
.dev-legend i { display: block; width: 9px; height: 4px; border-radius: 2px; background: var(--lc, #3b82f6); }
.dev-line-card {
  flex: 1; min-width: 0; padding: 3px;
  background: #fff; border: 1px solid #e8edf3; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex; align-items: stretch;
}
.dev-line { width: 100%; height: 100%; display: block; }

/* Mobile donut cluster */
.dev-mob-charts {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  background: #fff; border: 1px solid #e8edf3; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  flex: 0 0 auto;
}
.dev-mob-legend { display: flex; flex-direction: column; gap: 2.5px; }
.dev-mob-legend i { display: block; width: 8px; height: 3px; border-radius: 2px; background: var(--lc, #3b82f6); }

/* ═══════════ Realistic website UI (nav, hero, features) ═══════════ */
.dev-web-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px; background: #fff;
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  flex: 0 0 auto;
}
.dev-web-logo { display: flex; align-items: center; gap: 3px; }
.dev-web-logo i { display: block; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg,#3b82f6,#6d28d9); box-shadow: 0 1px 3px rgba(37,99,235,.4); }
.dev-web-logo b { display: block; width: 22px; height: 5px; border-radius: 2px; background: #1e293b; }
.dev-web-menu { display: flex; gap: 6px; }
.dev-web-menu i { display: block; width: 14px; height: 4px; border-radius: 2px; background: #cbd5e1; }
.dev-web-navcta { width: 26px; height: 12px; border-radius: 6px; background: #3b82f6; box-shadow: 0 2px 6px rgba(37,99,235,.35); }
.dev-web-burger { display: flex; flex-direction: column; gap: 2px; }
.dev-web-burger i { display: block; width: 10px; height: 2px; border-radius: 1px; background: #94a3b8; }

/* Colorful marketing-site preview (blue hero + orange band + vector SVG) */
.dev-site-color {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: #f8fafc;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.dev-slide > .dev-site-color,
.dev-slide > .dev-sw-site-lp {
  height: 100%;
}
.dev-sw-site-lp.dev-site-color { background: #f8fafc; }
.dev-site-blue {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #38bdf8 0%, #0ea5e9 45%, #0284c7 100%);
  padding: 0 0 4px;
}
.dev-sw-site-lp .dev-site-blue { flex: 1 1 auto; }
.dev-site-blue.stack { padding: 0 4px 4px; flex: 0 0 auto; }
.dev-site-orange {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 6px;
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
}
.dev-site-orange.sm { padding: 4px; gap: 4px; }
.dev-site-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 5px;
  background: #f8fafc;
  overflow: hidden;
}
.dev-site-body-h {
  font: 700 5.5px/1 system-ui, sans-serif;
  color: #0f172a;
  display: block;
}
.dev-site-cards {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.dev-site-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.dev-site-card-img {
  display: block;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fdba74, #fb923c);
}
.dev-site-card-img.i2 { background: linear-gradient(135deg, #93c5fd, #38bdf8); }
.dev-site-card-img.i3 { background: linear-gradient(135deg, #c4b5fd, #a78bfa); }
.dev-site-card-l {
  display: block;
  height: 3px;
  width: 78%;
  border-radius: 2px;
  background: #cbd5e1;
}
.dev-site-card-l.short { width: 52%; height: 2.5px; background: #e2e8f0; }
.dev-site-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 1px 0;
  flex: 1 1 auto;
}
.dev-site-lines span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #e2e8f0;
  width: 92%;
}
.dev-site-lines span.mid { width: 70%; }
.dev-site-lines span.short { width: 48%; }
.dev-sw-mob .dev-site-card-img { height: 14px; }
.dev-sw-mob .dev-site-body { padding: 4px 5px; gap: 3px; }
.dev-web-feat-mini {
  font: 600 5px/1 system-ui, sans-serif;
  color: #fff;
  white-space: nowrap;
  background: rgba(255,255,255,.18);
  padding: 3px 5px;
  border-radius: 6px;
}
.dev-site-orange.sm .dev-web-feat-mini { font-size: 4.5px; padding: 2px 4px; }

.dev-web-nav.light {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 5px 6px 2px;
}
.dev-web-nav.light .dev-web-logo-txt { color: #fff; display: inline-flex; align-items: center; gap: 3px; }
.dev-web-nav.light .dev-web-menu-txt em { color: rgba(255,255,255,.88); }
.dev-web-logo-mark {
  display: inline-block;
  width: 9px; height: 9px;
  flex-shrink: 0;
  vertical-align: -1px;
  border-radius: 2.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.dev-web-burger.light i { background: rgba(255,255,255,.9); }

.dev-site-color .dev-web-badge-txt {
  color: #0c4a6e; background: rgba(255,255,255,.92);
}
.dev-site-color .dev-web-title-txt { color: #fff; }
.dev-site-color .dev-web-desc-txt { color: rgba(255,255,255,.88); }
.dev-site-color .dev-web-cta-pri {
  background: linear-gradient(180deg, #fb923c, #ea580c);
  box-shadow: 0 2px 6px rgba(234,88,12,.4);
}
.dev-site-color .dev-web-cta-sec {
  color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.75);
}

.dev-web-vector {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 52px;
  border-radius: 8px;
}
.dev-web-hero-art.full {
  flex: 0 0 auto;
  height: 48px;
  margin: 2px 0;
}
.dev-web-hero-art.full .dev-web-vector { min-height: 48px; height: 48px; }
.dev-web-hero-art.full.sm { height: 38px; }
.dev-web-hero-art.full.sm .dev-web-vector { min-height: 38px; height: 38px; }
.dev-site-color .dev-web-hero { padding: 4px 6px 2px; }
.dev-site-color .dev-web-stack-copy { padding: 2px 2px 4px; }

/* Laptop: keep hero airy — drop badge/desc clutter, one CTA, roomier copy */
.dev-laptop .dev-web-badge-txt,
.dev-laptop .dev-web-desc-txt,
.dev-laptop .dev-web-cta-sec { display: none; }
.dev-laptop .dev-web-hero {
  padding: 6px 8px 4px;
  gap: 8px;
  align-items: center;
}
.dev-laptop .dev-web-hero-copy {
  gap: 5px;
  justify-content: center;
}
.dev-laptop .dev-web-title-txt {
  font-size: 8.5px;
  line-height: 1.2;
  max-width: 95%;
}
.dev-laptop .dev-web-cta-row { margin-top: 2px; }
.dev-laptop .dev-web-nav.light { padding: 5px 8px 3px; }
.dev-laptop .dev-site-body-h { margin-bottom: 1px; }
.dev-laptop .dev-site-lines span:nth-child(n+3) { display: none; }
.dev-laptop .dev-web-vector { min-height: 48px; }

/* Hero — two column (monitor / laptop) with real copy + photo */
.dev-web-hero { display: flex; gap: 7px; align-items: stretch; padding: 6px 7px 5px; flex: 1 1 auto; min-height: 0; }
.dev-web-hero-copy { flex: 1.05; display: flex; flex-direction: column; gap: 3px; justify-content: center; min-width: 0; }
.dev-web-logo-txt {
  font: 700 7px/1.1 system-ui, -apple-system, sans-serif;
  color: #1e293b; letter-spacing: -0.02em; white-space: nowrap;
}
.dev-web-menu-txt { display: flex; gap: 5px; align-items: center; }
.dev-web-menu-txt em {
  font: 500 5px/1 system-ui, sans-serif; font-style: normal;
  color: #64748b; white-space: nowrap;
}
.dev-web-badge-txt {
  display: inline-block; align-self: flex-start;
  font: 600 4.5px/1 system-ui, sans-serif;
  color: #1d4ed8; background: #dbeafe;
  padding: 2px 5px; border-radius: 6px; white-space: nowrap;
}
.dev-web-title-txt {
  font: 700 9px/1.15 system-ui, -apple-system, sans-serif;
  color: #0f172a; letter-spacing: -0.03em;
  margin: 0; display: block;
}
.dev-web-desc-txt {
  font: 400 5.5px/1.3 system-ui, sans-serif;
  color: #64748b; margin: 0;
}
.dev-web-cta-row { display: flex; gap: 4px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.dev-web-cta-pri {
  font: 600 5.5px/1 system-ui, sans-serif;
  color: #fff; background: linear-gradient(180deg,#3b82f6,#2563eb);
  padding: 4px 7px; border-radius: 5px;
  box-shadow: 0 2px 6px rgba(37,99,235,.35); white-space: nowrap;
}
.dev-web-cta-sec {
  font: 500 5.5px/1 system-ui, sans-serif;
  color: #475569; background: #fff;
  padding: 3.5px 6px; border-radius: 5px;
  border: 1px solid #e2e8f0; white-space: nowrap;
}

.dev-web-hero-art { flex: 1; min-width: 0; display: flex; align-items: stretch; }
.dev-web-photo {
  display: block; width: 100%; height: 100%; min-height: 58px;
  object-fit: cover; object-position: center;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15,23,42,.18);
}
.dev-web-photo.tall {
  flex: 0 0 auto; height: 54px; min-height: 54px;
  border-radius: 7px; margin: 0;
}
.dev-web-photo.sm { height: 42px; min-height: 42px; border-radius: 6px; }

/* Stacked copy under photo (tablet / phone) */
.dev-web-stack-copy {
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 1px 0; flex: 0 0 auto;
}
.dev-web-stack-copy .dev-web-title-txt { font-size: 7.5px; }
.dev-web-stack-copy .dev-web-desc-txt { font-size: 5px; }
.dev-sw-mob .dev-web-title-txt { font-size: 6.5px; }
.dev-sw-mob .dev-web-cta-pri { font-size: 5px; padding: 3px 5px; }
.dev-sw-mob .dev-web-logo-txt,
.dev-sw-site .dev-web-logo-txt { font-size: 6px; }

.dev-web-about {
  display: flex; justify-content: center; gap: 4px;
  padding: 3px 1px 1px; flex: 0 0 auto;
}
.dev-web-pill {
  font: 600 4.5px/1 system-ui, sans-serif;
  color: #334155; background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 2.5px 5px; border-radius: 8px; white-space: nowrap;
}
.dev-web-about.sm { gap: 3px; }
.dev-web-about.sm .dev-web-pill { font-size: 4px; padding: 2px 4px; }

/* Nav tweaks when using real text logo */
.dev-web-nav { gap: 4px; }
.dev-web-nav .dev-web-burger { margin-left: auto; }

/* Legacy placeholder bars (unused on new slides) */
.dev-web-brand { width: 36px; height: 5px; border-radius: 2px; background: linear-gradient(90deg,#f97316,#ea580c); margin-bottom: 2px; }
.dev-web-h1 { width: 94%; height: 8px; border-radius: 3px; background: #1e293b; }
.dev-web-h1.short { width: 62%; }
.dev-web-p { width: 88%; height: 3px; border-radius: 2px; background: #cbd5e1; }
.dev-web-p.short { width: 68%; }
.dev-web-search {
  display: flex; align-items: stretch; gap: 0; margin-top: 5px;
  width: 92%; max-width: 110px; height: 12px;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(15,23,42,.1);
}
.dev-web-search-field { flex: 1; background: #f1f5f9; border: 1px solid #e2e8f0; border-right: 0; border-radius: 6px 0 0 6px; }
.dev-web-search-btn { width: 28px; flex: 0 0 28px; background: linear-gradient(180deg,#fb923c,#ea580c); }

/* Colorful abstract (legacy) */
.dev-web-illus {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 58px;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 20% 80%, rgba(251,146,60,.25) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(167,139,250,.3) 0%, transparent 50%),
    linear-gradient(160deg, #fef3c7 0%, #ede9fe 40%, #e0f2fe 100%);
  box-shadow: 0 6px 18px rgba(124,58,237,.18);
}
.dev-web-illus.tall { flex: 0 0 auto; height: 52px; min-height: 52px; }
.dev-web-illus.sm { height: 40px; min-height: 40px; border-radius: 8px; }
.dev-web-blob { position: absolute; border-radius: 50%; filter: saturate(1.15); }
.dev-web-blob.b1 {
  width: 55%; height: 70%; left: -8%; bottom: -18%;
  background: linear-gradient(145deg, #f97316 0%, #ea580c 45%, #c2410c 100%);
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; transform: rotate(-18deg);
}
.dev-web-blob.b2 {
  width: 42%; height: 55%; right: -5%; top: -12%;
  background: linear-gradient(160deg, #a78bfa 0%, #7c3aed 55%, #5b21b6 100%);
  border-radius: 58% 42% 48% 52% / 42% 58% 42% 58%; transform: rotate(22deg);
}
.dev-web-blob.b3 {
  width: 38%; height: 42%; left: 28%; top: 8%;
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 60%, #115e59 100%);
  border-radius: 48% 52% 42% 58% / 55% 45% 55% 45%;
}
.dev-web-blob.b4 {
  width: 28%; height: 32%; right: 18%; bottom: 6%;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 55% 45% 50% 50%;
}
.dev-web-blob.b5 {
  width: 18%; height: 22%; left: 12%; top: 18%;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  border-radius: 60% 40% 55% 45%;
}
.dev-web-ring {
  position: absolute; width: 34%; height: 40%; left: 38%; bottom: 12%;
  border: 2.5px solid rgba(124,58,237,.55); border-radius: 50%; transform: rotate(-12deg);
}
.dev-web-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #7c3aed; }
.dev-web-dot.d1 { top: 22%; left: 48%; background: #f97316; }
.dev-web-dot.d2 { top: 55%; right: 22%; background: #2dd4bf; width: 4px; height: 4px; }
.dev-web-dot.d3 { bottom: 28%; left: 22%; background: #fbbf24; width: 3.5px; height: 3.5px; }
.dev-web-circle {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.dev-web-circle.c1 { background: linear-gradient(145deg,#fb923c,#ea580c); }
.dev-web-circle.c2 { background: linear-gradient(145deg,#a78bfa,#7c3aed); }
.dev-web-circle.c3 { background: linear-gradient(145deg,#2dd4bf,#0d9488); }

/* Legacy art-card */
.dev-web-art {
  background: linear-gradient(160deg,#0f1f4e 0%,#1b2f72 45%,#2a1a6a 100%);
  border-radius: 8px; padding: 6px 5px;
  box-shadow: 0 10px 24px rgba(15,31,78,.55), inset 0 0 0 1px rgba(255,255,255,.09);
  display: flex; flex-direction: column; gap: 4px;
}
.dev-web-art-top { display: flex; gap: 3px; }
.dev-web-art-top span { flex: 1; height: 12px; border-radius: 4px; background: rgba(255,255,255,.9); }
.dev-web-art-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 30px;
  padding: 4px; background: rgba(255,255,255,.96); border-radius: 5px;
}
.dev-web-art-bars i { flex: 1; height: var(--h,50%); border-radius: 2px 2px 0 0; background: linear-gradient(to top,#3b82f6,#93c5fd); }

.dev-web-hero-banner {
  position: relative;
  height: 50px; border-radius: 8px; padding: 8px;
  background: linear-gradient(135deg,#1d4ed8 0%,#4338ca 45%,#7c3aed 100%);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  flex: 0 0 auto;
}
.dev-web-hb-h { height: 6px; width: 72%; border-radius: 3px; background: rgba(255,255,255,.95); }
.dev-web-hb-h.short { width: 46%; }
.dev-web-hb-btn { height: 11px; width: 38px; border-radius: 6px; background: #fff; margin-top: 3px; }
.dev-web-hero-banner.mob { height: 40px; padding: 7px; }

/* Feature cards */
.dev-web-features { display: flex; gap: 5px; padding: 2px 8px; flex: 0 0 auto; }
.dev-web-feat {
  flex: 1; background: #fff; border: 1px solid #eef2f7; border-radius: 6px;
  padding: 5px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dev-web-feat-ic { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg,#3b82f6,#6d28d9); }
.dev-web-feat-ic.g { background: linear-gradient(135deg,#047857,#10b981); }
.dev-web-feat-ic.o { background: linear-gradient(135deg,#c2410c,#f97316); }
.dev-web-feat-l { display: block; height: 4px; border-radius: 2px; background: #e2e8f0; width: 90%; }
.dev-web-feat-l.short { width: 58%; }
.dev-web-feat.mob { flex-direction: row; align-items: center; gap: 6px; padding: 5px 6px; }
.dev-web-feat-lines { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.dev-web-logos { display: flex; gap: 6px; justify-content: center; align-items: center; padding: 2px 8px; flex: 0 0 auto; }
.dev-web-logos i { display: block; width: 20px; height: 6px; border-radius: 3px; background: #e2e8f0; }
.dev-web-logos.mob i { width: 14px; }

/* ─────────────────── TABLET ─────────────────── */
.dev-tablet {
  position: absolute;
  left: 72px; top: 78px;
  right: auto;
  width: 138px;
  z-index: 2;
  animation: devFloatT 7s ease-in-out infinite;
  animation-delay: -2s;
}

/* iPad-style: even bezels all around, straight portrait */
.dev-tablet-bezel {
  background: linear-gradient(180deg, #262b33 0%, #1a1e25 100%);
  border-radius: 11px;
  padding: 7px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.2),
    0 12px 32px rgba(0,0,0,.22),
    0 32px 60px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.dev-tablet .dev-screen { height: 172px; border-radius: 5px; }

.dev-tablet .dev-cam-dot { margin: 0 auto 4px; }

.dev-home-bar {
  width: 26px; height: 2px;
  background: rgba(255,255,255,.14); border-radius: 2px;
  margin: 4px auto 0;
}

/* Website in tablet */
.dev-site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 4px; background: #fff; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.dev-site-logo { width: 28px; height: 5px; background: #3b82f6; border-radius: 3px; }
.dev-site-dots { display: flex; gap: 3px; }
.dev-site-dots i { display: block; width: 12px; height: 4px; background: #e2e8f0; border-radius: 2px; }

.dev-site-banner {
  height: 34px;
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(37,99,235,.28);
}
.dev-site-banner.alt {
  background: linear-gradient(135deg, #047857 0%, #1d4ed8 100%);
  box-shadow: 0 4px 14px rgba(4,120,87,.22);
}

.dev-site-h   { height: 5px; background: #1e293b; border-radius: 3px; width: 72%; }
.dev-site-sub { height: 4px; background: #e2e8f0; border-radius: 2px; }
.dev-site-cta {
  height: 9px; background: #3b82f6; border-radius: 12px; width: 36%;
  box-shadow: 0 3px 8px rgba(37,99,235,.3);
}
.dev-site-cards { display: flex; gap: 4px; }
.dev-site-card {
  flex: 1; height: 24px; background: #f8fafc; border-radius: 5px;
  border: 1px solid #e2e8f0;
}
.dev-site-card.hi {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #bfdbfe;
}
.dev-site-lines { display: flex; flex-direction: column; gap: 3px; }
.dev-site-lines span { display: block; height: 3px; background: #e2e8f0; border-radius: 2px; }
.dev-site-lines span.short { width: 60%; }

/* ─────────────────── PHONE (modern ~9:19.5 handset) ─────────────────── */
.dev-phone {
  position: absolute;
  left: 162px; bottom: 6px;
  right: auto;
  width: 66px;
  z-index: 5;
  animation: devFloatP 5s ease-in-out infinite;
  animation-delay: -4s;
}

.dev-phone-bezel {
  position: relative;
  background:
    linear-gradient(155deg, #2b313b 0%, #171b21 55%, #0b0d12 100%);
  border-radius: 16px;
  padding: 5px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.22),
    0 10px 26px rgba(0,0,0,.28),
    0 22px 50px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(0,0,0,.4);
}
/* Metal side buttons */
.dev-phone-bezel::before {
  content: '';
  position: absolute;
  left: -1.5px; top: 34px;
  width: 1.5px; height: 15px;
  background: linear-gradient(#3a414c, #1c2027);
  border-radius: 2px 0 0 2px;
}
.dev-phone-bezel::after {
  content: '';
  position: absolute;
  right: -1.5px; top: 28px;
  width: 1.5px; height: 11px;
  background: linear-gradient(#3a414c, #1c2027);
  border-radius: 0 2px 2px 0;
}

/* Dynamic-island style pill floating over the screen top */
.dev-pill-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 5.5px;
  background: #05070b; border-radius: 6px;
  z-index: 6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.dev-phone .dev-screen { height: 128px; border-radius: 11px; }

/* Slim home indicator on the chin */
.dev-phone-homekey {
  width: 22px; height: 2px;
  background: rgba(255,255,255,.55); border-radius: 2px;
  margin: 4px auto 0;
}

/* Mobile website in phone */
.dev-mob-nav  { padding: 2px 3px; }
.dev-mob-nav span { display: block; width: 22px; height: 5px; background: #3b82f6; border-radius: 3px; }
.dev-mob-hero {
  height: 28px;
  background: linear-gradient(135deg, #6d28d9, #1d4ed8);
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(37,99,235,.28);
}
.dev-mob-title { height: 4px; background: #1e293b; border-radius: 2px; width: 72%; }
.dev-mob-sub  { height: 3px; background: #e2e8f0; border-radius: 2px; }
.dev-mob-btn  {
  height: 8px; background: #3b82f6; border-radius: 8px; width: 42%;
  box-shadow: 0 2px 8px rgba(37,99,235,.32);
}
.dev-mob-card {
  height: 18px; background: #f8fafc; border-radius: 5px;
  border: 1px solid #e8edf3;
}
.dev-mob-card.alt {
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border-color: #ddd6fe;
}
.dev-mob-dots { display: flex; gap: 4px; justify-content: center; }
.dev-mob-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; }
.dev-mob-dots i.b { background: #3b82f6; } .dev-mob-dots i.g { background: #10b981; } .dev-mob-dots i.o { background: #f97316; }

/* ─────────────────── CHIPS ─────────────────── */
.dev-chip {
  position: absolute;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 5px 11px 5px 7px;
  font-size: 9.5px; font-weight: 700; color: #1e293b;
  box-shadow:
    0 2px 8px rgba(0,0,0,.1),
    0 6px 20px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.8);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.dev-chip-live    { top: -8px; left: 150px; animation: devChipFloat 4s ease-in-out infinite; }
.dev-chip-mobile  { bottom: 48px; left: 48px; animation: devChipFloat 4s ease-in-out infinite; animation-delay: -1.5s; }
.dev-chip-instant { top: 18px; right: -4px;   animation: devChipFloat 4s ease-in-out infinite; animation-delay: -3s; }

.dev-chip-pulse {
  width: 7px; height: 7px;
  background: #10b981; border-radius: 50%;
  animation: chipPulse 1.4s ease-in-out infinite;
}

@keyframes chipPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(16,185,129,.3); }
  50%     { box-shadow: 0 0 0 5px rgba(16,185,129,.08); }
}

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

/* ── Responsive ── */
@media (max-width: 1300px) {
  .dev-scene { transform: translate(-50%,-50%) scale(0.82); }
}
@media (max-width: 1100px) {
  .dev-scene { transform: translate(-50%,-50%) scale(0.7); }
}
@media (max-width: 900px) {
  .dev-scene { transform: translate(-50%,-50%) scale(0.58); }
}

/* Stacked hero: pin devices to top — scale from top so no empty band above monitors */
@media (max-width: 968px) {
  .hero-visual .dev-scene {
    top: 0;
    transform: translate(-50%, 0) scale(0.58);
    transform-origin: top center;
  }
}
@media (max-width: 640px) {
  .hero-visual {
    margin-top: 32px;
  }
  .hero-visual .dev-scene {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0) scale(0.5);
    transform-origin: top center;
  }
}

/* ── How it works: cinematic teaser placeholder ── */
.theme-teaser-section {
  padding: 0 0 56px;
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
}
.theme-teaser-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 40px;
  align-items: center;
}
.theme-teaser-content .section-title {
  margin-bottom: 12px;
}
.theme-teaser-content .section-description {
  margin-bottom: 0;
  max-width: 420px;
}
.theme-video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.35),
    0 0 40px rgba(37, 99, 235, 0.22),
    0 24px 48px rgba(15, 23, 42, 0.28);
}
@media (max-width: 768px) {
  .theme-teaser-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .theme-teaser-content .section-description {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════════ Self-playing teaser stage ═══════════════ */
.tz-stage {
  position: absolute;
  inset: 0;
  container-type: size;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
}
.tz-bg {
  position: absolute;
  inset: 0;
  transition: background .8s ease, filter .8s ease;
  background: linear-gradient(145deg, #0b1120, #0f172a);
}
.tz-stage[data-mood="dark"] .tz-bg {
  background: linear-gradient(145deg, #0b1120 0%, #111827 60%, #0b1120 100%);
  filter: saturate(.55) brightness(.82);
}
.tz-stage[data-mood="bright"] .tz-bg {
  background:
    radial-gradient(ellipse 70% 60% at 30% 35%, rgba(37,99,235,.5) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 72% 62%, rgba(124,58,237,.45) 0%, transparent 55%),
    linear-gradient(145deg, #0f172a 0%, #1e1b4b 55%, #0f172a 100%);
}
.tz-stage[data-mood="cta"] .tz-bg {
  background: linear-gradient(160deg, #0f172a 0%, #111827 100%);
}
.tz-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.5));
  z-index: 6;
}
.tz-badge {
  position: absolute;
  top: 3.5cqh;
  left: 4cqw;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1cqh 2.4cqw;
  border-radius: 3cqw;
  font-size: clamp(.5rem, 2.2cqw, .8rem);
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tz-badge-dot {
  width: 1.8cqw; height: 1.8cqw;
  max-width: 8px; max-height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,.8);
}

/* Scene base */
.tz-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqh;
  padding: 7cqw;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2.4cqh) scale(.99);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.tz-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Captions */
.tz-cap {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  font-size: clamp(1rem, 5.4cqw, 2.5rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  max-width: 88cqw;
}
.tz-cap--tense { color: #fca5a5; }
.tz-cap--grad {
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tz-scene.is-active .tz-cap { animation: tzCapIn .7s .12s both; }
@keyframes tzCapIn {
  from { opacity: 0; transform: translateY(2.4cqh); }
  to   { opacity: 1; transform: none; }
}

/* ── Scene 0: chaos ── */
.tz-apps { position: absolute; inset: 0; pointer-events: none; }
.tz-app {
  position: absolute;
  width: 24cqw; height: 17cqh;
  border-radius: 1.6cqw;
  background: #1f2937;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transform: rotate(var(--r, 0deg));
}
.tz-app i {
  position: absolute; top: 0; left: 0; right: 0; height: 3.4cqh;
  border-radius: 1.6cqw 1.6cqw 0 0;
}
.tz-app--1 { top: 12cqh; left: 8cqw;  --r: -5deg; }
.tz-app--1 i { background: #ef4444; }
.tz-app--2 { top: 9cqh;  left: 36cqw; --r: 3deg; }
.tz-app--2 i { background: #f59e0b; }
.tz-app--3 { top: 14cqh; left: 64cqw; --r: 6deg; }
.tz-app--3 i { background: #10b981; }
.tz-app--4 { top: 44cqh; left: 12cqw; --r: 4deg; }
.tz-app--4 i { background: #3b82f6; }
.tz-app--5 { top: 47cqh; left: 40cqw; --r: -4deg; }
.tz-app--5 i { background: #8b5cf6; }
.tz-app--6 { top: 42cqh; left: 66cqw; --r: -7deg; }
.tz-app--6 i { background: #ec4899; }
.tz-scene--chaos.is-active .tz-app { animation: tzJitter 1.8s ease-in-out infinite; }
.tz-scene--chaos.is-active .tz-app--2 { animation-delay: -.3s; }
.tz-scene--chaos.is-active .tz-app--3 { animation-delay: -.6s; }
.tz-scene--chaos.is-active .tz-app--4 { animation-delay: -.9s; }
.tz-scene--chaos.is-active .tz-app--5 { animation-delay: -1.2s; }
.tz-scene--chaos.is-active .tz-app--6 { animation-delay: -1.5s; }
@keyframes tzJitter {
  0%,100% { transform: translate(0,0) rotate(var(--r,0deg)); }
  50%     { transform: translate(.6cqw,-.6cqh) rotate(var(--r,0deg)); }
}
.tz-pings { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tz-ping {
  position: absolute;
  width: 5cqw; height: 5cqw;
  max-width: 26px; max-height: 26px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.5rem, 2.4cqw, .9rem);
  box-shadow: 0 4px 14px rgba(239,68,68,.5);
  opacity: 0;
}
.tz-ping--1 { top: 16cqh; left: 26cqw; }
.tz-ping--2 { top: 20cqh; left: 58cqw; }
.tz-ping--3 { top: 50cqh; left: 30cqw; }
.tz-scene--chaos.is-active .tz-ping { animation: tzPing 4s both; }
.tz-scene--chaos.is-active .tz-ping--2 { animation-delay: .7s; }
.tz-scene--chaos.is-active .tz-ping--3 { animation-delay: 1.3s; }
@keyframes tzPing {
  0%   { opacity: 0; transform: scale(0); }
  12%  { opacity: 1; transform: scale(1.25); }
  18%  { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.tz-scene--chaos .tz-cap { position: absolute; bottom: 7cqh; }

/* ── Scene 1: problem (flashing logins) ── */
.tz-logins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6cqw;
  width: 100%; max-width: 82cqw;
}
.tz-login {
  aspect-ratio: 4 / 3;
  border-radius: 1.6cqw;
  background: #111827;
  border: 1px solid rgba(148,163,184,.18);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.4cqh;
  opacity: .16;
}
.tz-login-logo { width: 8cqw; height: 8cqw; border-radius: 50%; background: #334155; }
.tz-login-line { width: 58%; height: 1.8cqh; border-radius: 1cqw; background: rgba(148,163,184,.4); }
.tz-login-btn  { width: 46%; height: 2.6cqh; border-radius: 1cqw; background: #2563eb; opacity: .7; }
.tz-scene--problem.is-active .tz-login { animation: tzLoginFlash 4s ease-in-out infinite; }
.tz-scene--problem.is-active .tz-login:nth-child(2) { animation-delay: .25s; }
.tz-scene--problem.is-active .tz-login:nth-child(3) { animation-delay: .5s; }
.tz-scene--problem.is-active .tz-login:nth-child(4) { animation-delay: .75s; }
.tz-scene--problem.is-active .tz-login:nth-child(5) { animation-delay: 1s; }
.tz-scene--problem.is-active .tz-login:nth-child(6) { animation-delay: 1.25s; }
@keyframes tzLoginFlash {
  0%, 100% { opacity: .16; }
  10%, 22% { opacity: 1; box-shadow: 0 0 24px rgba(37,99,235,.4); }
}
.tz-scene--problem .tz-cap { position: absolute; bottom: 6cqh; }

/* ── Reusable mini dashboard ── */
.tz-dash {
  width: 100%;
  background: #0b1220;
  border-radius: 1.8cqw;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(96,165,250,.18);
}
.tz-dash-top {
  display: flex; align-items: center;
  padding: 1.8cqh 2.4cqw;
  background: #0f172a;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.tz-dot-row { display: flex; gap: 1.2cqw; }
.tz-dot { width: 1.8cqw; height: 1.8cqw; max-width: 9px; max-height: 9px; border-radius: 50%; background: #334155; }
.tz-dash-body { padding: 2.2cqh 2.4cqw; display: flex; flex-direction: column; gap: 2cqh; }
.tz-kpis { display: flex; gap: 1.8cqw; }
.tz-kpi {
  flex: 1; border-radius: 1.4cqw; padding: 1.6cqh 1.4cqw; color: #fff;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.5);
}
.tz-kpi b { display: block; font-weight: 800; font-size: clamp(.7rem, 3.4cqw, 1.4rem); font-style: normal; }
.tz-kpi span { font-size: clamp(.42rem, 1.8cqw, .78rem); opacity: .85; }
.tz-kpi--b { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.tz-kpi--g { background: linear-gradient(135deg, #047857, #10b981); }
.tz-kpi--p { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.tz-chart {
  display: flex; align-items: flex-end; gap: 1.4cqw;
  height: 15cqh; padding: 1.6cqh 1.4cqw;
  background: #0f172a; border-radius: 1.4cqw;
}
.tz-bar { flex: 1; height: var(--h, 50%); background: #1e3a8a; border-radius: 1cqw 1cqw 0 0; }
.tz-bar.hi { background: linear-gradient(to top, #3b82f6, #93c5fd); box-shadow: 0 -2px 12px rgba(59,130,246,.5); }

/* ── Scene 2: turning point ── */
.tz-turn-card { width: 66cqw; }
.tz-scene--turn.is-active .tz-turn-card { animation: tzRise .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tzRise {
  from { opacity: 0; transform: scale(.9) translateY(3cqh); }
  to   { opacity: 1; transform: none; }
}
.tz-flash {
  position: absolute; inset: 0; z-index: 5;
  background: #fff; opacity: 0; pointer-events: none;
}
.tz-scene--turn.is-active .tz-flash { animation: tzWhite 1.1s ease-out both; }
@keyframes tzWhite { 0% { opacity: .85; } 100% { opacity: 0; } }
.tz-scene--turn .tz-cap { position: absolute; bottom: 6cqh; }

/* ── Scene 3: montage ── */
.tz-scene--montage { padding: 0; }
.tz-beat {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.tz-scene--montage.is-active .tz-beat--site  { animation: tzBeat 2s 0s both; }
.tz-scene--montage.is-active .tz-beat--erp   { animation: tzBeat 2s 2s both; }
.tz-scene--montage.is-active .tz-beat--multi { animation: tzBeat 2s 4s both; }
@keyframes tzBeat {
  0%   { opacity: 0; transform: scale(.95); }
  12%  { opacity: 1; transform: scale(1); }
  86%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}
.tz-mflash {
  position: absolute; inset: 0; z-index: 5;
  background: #fff; opacity: 0; pointer-events: none;
}
.tz-scene--montage.is-active .tz-mflash { animation: tzMFlash 6s linear both; }
@keyframes tzMFlash {
  0%,30% { opacity: 0; } 33% { opacity: .75; } 36%,63% { opacity: 0; }
  66% { opacity: .75; } 69%,100% { opacity: 0; }
}
.tz-site {
  width: 68cqw; background: #fff; border-radius: 1.8cqw; overflow: hidden;
  color: #0f172a; box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.tz-site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.8cqh 2.4cqw; border-bottom: 1px solid #eef2f7;
}
.tz-site-logo { width: 16cqw; height: 2.6cqh; background: #2563eb; border-radius: 1cqw; }
.tz-site-menu { display: flex; gap: 1.4cqw; }
.tz-site-menu i { width: 6cqw; height: 1.8cqh; background: #e2e8f0; border-radius: 1cqw; }
.tz-site-hero {
  height: 17cqh; margin: 2.4cqw; border-radius: 1.6cqw;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow: 0 8px 24px rgba(37,99,235,.35);
}
.tz-site-cards { display: flex; gap: 2cqw; padding: 0 2.4cqw 2.4cqw; }
.tz-site-card { flex: 1; height: 11cqh; border-radius: 1.4cqw; background: #f1f5f9; border: 1px solid #e2e8f0; }
.tz-beat--erp .tz-dash { width: 66cqw; }
.tz-toast {
  position: absolute; top: 9cqh; right: 8cqw; z-index: 4;
  display: flex; align-items: center; gap: 1.6cqw;
  padding: 1.4cqh 2.2cqw; border-radius: 1.6cqw;
  background: #0b1220; border: 1px solid rgba(34,197,94,.45); color: #fff;
  font-weight: 700; font-size: clamp(.5rem, 2.4cqw, .95rem); white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.tz-scene--montage.is-active .tz-toast { animation: tzToast 2s 2s both; }
@keyframes tzToast {
  0%   { opacity: 0; transform: translateX(3cqw); }
  16%  { opacity: 1; transform: none; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}
.tz-toast-dot { width: 2.6cqw; height: 2.6cqw; max-width: 12px; max-height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.8); }
.tz-phone {
  width: 32cqw; background: #0b1220; border-radius: 4cqw;
  padding: 2.4cqh 2cqw; border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.tz-phone-note { width: 30%; height: 1.6cqh; background: #1f2937; border-radius: 2cqw; margin: 0 auto 2cqh; }
.tz-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2cqw; }
.tz-tile {
  aspect-ratio: 1; border-radius: 2cqw;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 6cqw, 2.4rem);
}
.tz-tile--food { background: linear-gradient(135deg, #f97316, #ef4444); }
.tz-tile--edu  { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.tz-tile--care { background: linear-gradient(135deg, #10b981, #047857); }
.tz-tile--shop { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.tz-chip {
  position: absolute; bottom: 7cqh; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 1.4cqw;
  padding: 1.4cqh 2.6cqw; border-radius: 3cqw;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  font-weight: 700; font-size: clamp(.6rem, 2.7cqw, 1.05rem); white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* ── Scene 4: human proof ── */
.tz-personas { display: flex; gap: 2.6cqw; width: 100%; max-width: 88cqw; justify-content: center; }
.tz-persona {
  flex: 1; max-width: 27cqw;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.8cqw; padding: 2.6cqh 1.8cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqh;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
}
.tz-scene--proof.is-active .tz-persona { animation: tzRise .7s both; }
.tz-scene--proof.is-active .tz-persona:nth-child(2) { animation-delay: .18s; }
.tz-scene--proof.is-active .tz-persona:nth-child(3) { animation-delay: .36s; }
.tz-persona-ic {
  width: 13cqw; height: 13cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 5.4cqw, 2rem);
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  box-shadow: 0 8px 20px rgba(37,99,235,.4);
}
.tz-persona b { font-size: clamp(.62rem, 2.8cqw, 1.05rem); }
.tz-persona span { font-size: clamp(.5rem, 2.1cqw, .82rem); opacity: .78; }
.tz-persona-metric { margin-top: auto; color: #86efac; font-weight: 700; }

/* ── Scene 5: reveal ── */
.tz-city {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40cqh;
  background:
    radial-gradient(circle at 18% 60%, rgba(96,165,250,.5) 0 .4cqw, transparent 1cqw),
    radial-gradient(circle at 30% 40%, rgba(167,139,250,.5) 0 .4cqw, transparent 1cqw),
    radial-gradient(circle at 46% 70%, rgba(96,165,250,.4) 0 .3cqw, transparent .9cqw),
    radial-gradient(circle at 62% 46%, rgba(147,197,253,.5) 0 .4cqw, transparent 1cqw),
    radial-gradient(circle at 78% 64%, rgba(167,139,250,.45) 0 .3cqw, transparent .9cqw),
    radial-gradient(circle at 88% 42%, rgba(96,165,250,.5) 0 .4cqw, transparent 1cqw);
  opacity: .8; pointer-events: none;
}
.tz-laptop { width: 62cqw; }
.tz-scene--reveal.is-active .tz-laptop { animation: tzPull 3.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tzPull {
  from { transform: scale(1.22); }
  to   { transform: scale(1); }
}
.tz-laptop-screen {
  background: #0b1220; border: 1cqw solid #1f2733; border-radius: 1.6cqw;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.tz-laptop-screen .tz-dash { box-shadow: none; border-radius: 0; }
.tz-laptop-base {
  height: 2.2cqh; margin: 0 -7cqw;
  background: linear-gradient(#3a4150, #20262f);
  border-radius: 0 0 2.4cqw 2.4cqw;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.tz-scene--reveal .tz-cap { position: absolute; bottom: 6cqh; }

/* ── Scene 6: CTA ── */
.tz-scene--cta { gap: 2cqh; }
.tz-logo {
  font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 8.5cqw, 3.6rem);
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(96,165,250,.5));
}
.tz-scene--cta.is-active .tz-logo { animation: tzLogoIn .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tzLogoIn {
  from { opacity: 0; transform: scale(.86); filter: drop-shadow(0 0 0 rgba(96,165,250,0)); }
  to   { opacity: 1; transform: scale(1); }
}
.tz-url {
  font-weight: 700; letter-spacing: .02em; color: #e2e8f0;
  font-size: clamp(.8rem, 3.6cqw, 1.5rem);
}
.tz-scene--cta.is-active .tz-url { animation: tzCapIn .6s .45s both; }
.tz-cta-btn {
  margin-top: 1.4cqh; padding: 1.8cqh 3.6cqw; border-radius: 3cqw;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
  font-weight: 800; font-size: clamp(.7rem, 3.1cqw, 1.2rem);
  box-shadow: 0 12px 30px rgba(37,99,235,.5);
}
.tz-scene--cta.is-active .tz-cta-btn { animation: tzCapIn .6s .75s both, tzPulse 1.7s 1.4s ease-in-out infinite; }
@keyframes tzPulse {
  0%,100% { box-shadow: 0 12px 30px rgba(37,99,235,.5); }
  50%     { box-shadow: 0 12px 42px rgba(37,99,235,.9); }
}

/* Progress + poster */
.tz-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: .9cqh; min-height: 3px; z-index: 8;
  background: rgba(255,255,255,.12);
}
.tz-progress-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3b82f6, #a78bfa);
}
.tz-poster {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4cqh; border: none; cursor: pointer; color: #fff;
  background: linear-gradient(145deg, rgba(15,23,42,.82), rgba(30,27,75,.82));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: opacity .4s ease, visibility .4s ease;
}
.tz-stage[data-playing="true"] .tz-poster { opacity: 0; visibility: hidden; }
.tz-poster-play {
  width: 16cqw; height: 16cqw; max-width: 84px; max-height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 30px rgba(37,99,235,.55);
  transition: transform .25s ease, background .25s ease;
}
.tz-poster-play svg { width: 40%; height: 40%; margin-left: 6%; }
.tz-poster:hover .tz-poster-play { transform: scale(1.08); background: rgba(37,99,235,.5); }
.tz-poster-text { font-weight: 700; font-size: clamp(.7rem, 3cqw, 1.1rem); }
.tz-poster:focus-visible { outline: 2px solid #60a5fa; outline-offset: -6px; }

@media (prefers-reduced-motion: reduce) {
  .tz-scene, .tz-bg { transition: none; }
  .tz-scene.is-active .tz-cap,
  .tz-scene--chaos.is-active .tz-app,
  .tz-scene--chaos.is-active .tz-ping,
  .tz-scene--problem.is-active .tz-login,
  .tz-scene--turn.is-active .tz-turn-card,
  .tz-scene--turn.is-active .tz-flash,
  .tz-scene--montage.is-active .tz-beat,
  .tz-scene--montage.is-active .tz-mflash,
  .tz-scene--montage.is-active .tz-toast,
  .tz-scene--proof.is-active .tz-persona,
  .tz-scene--reveal.is-active .tz-laptop,
  .tz-scene--cta.is-active .tz-logo,
  .tz-scene--cta.is-active .tz-url,
  .tz-scene--cta.is-active .tz-cta-btn { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Photo-like hero block (replaces flat hero on all device website slides)
   ═══════════════════════════════════════════════════════════════════════ */

/* Base hero wrapper — clean SaaS landing-page hero (crisp at any zoom, no external image) */
.dev-web-hero-photo {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(ellipse 55% 85% at 85% 25%, rgba(168,85,247,.55) 0%, transparent 62%),
    radial-gradient(ellipse 50% 75% at 12% 78%, rgba(59,130,246,.45) 0%, transparent 60%),
    linear-gradient(135deg, #1e3a8a 0%, #312e81 45%, #4c1d95 100%);
}
/* Subtle bottom fade — keeps CTA row legible */
.dev-web-hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.32) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Nav overlay — glass/dark bar at top */
.dev-web-hero-photo .dev-web-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(5,12,28,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 5px 5px 0 0;
  z-index: 3;
  box-shadow: none;
}
.dev-web-hero-photo .dev-web-nav .dev-web-logo b { background: rgba(255,255,255,.88); }
.dev-web-hero-photo .dev-web-nav .dev-web-menu i { background: rgba(255,255,255,.45); }
.dev-web-hero-photo .dev-web-nav .dev-web-navcta {
  background: rgba(255,255,255,.22);
  box-shadow: none;
}

/* Text overlay: eyebrow + headline + body + CTA */
.dev-web-hero-text {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 8px 7px;
  margin-top: 18px;
}
.dev-web-photo-eyebrow {
  height: 5px; width: 38px; border-radius: 3px;
  background: rgba(99,179,237,.95);
}
.dev-web-photo-h1 {
  height: 8px; width: 85%; border-radius: 3px;
  background: rgba(255,255,255,.96);
}
.dev-web-photo-h1.short { height: 7px; width: 60%; }
.dev-web-photo-p {
  height: 3.5px; border-radius: 2px;
  background: rgba(255,255,255,.55);
  width: 72%;
}
.dev-web-photo-btns { display: flex; gap: 5px; margin-top: 3px; }
.dev-web-photo-btn {
  height: 11px; width: 40px; border-radius: 6px;
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,.65);
}
.dev-web-photo-btn.ghost {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: none;
}

/* Floating mini-chart card (laptop/monitor) — right half of hero */
.dev-web-art-float {
  position: absolute;
  bottom: 7px; right: 7px; width: 36%;
  z-index: 3;
}
.dev-web-art-mini {
  background: rgba(255,255,255,.96);
  border-radius: 5px; padding: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: 3px;
}
.dev-web-art-mini .dev-web-art-top {
  display: flex; gap: 3px;
}
.dev-web-art-mini .dev-web-art-top span {
  flex: 1; height: 5px; border-radius: 2px;
  background: #e2e8f0;
}
.dev-web-art-mini .dev-web-art-bars {
  height: 22px; padding: 2px 2px 0;
  border-radius: 3px; background: #f8fafc;
  display: flex; align-items: flex-end; gap: 2px;
}
.dev-web-art-mini .dev-web-art-bars i {
  flex: 1; height: var(--h, 50%); border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, #2563eb, #60a5fa);
}

/* Height variants per device screen */
.dev-sw-site-lp  .dev-web-hero-photo { height: 70px; }
.dev-monitor-site .dev-web-hero-photo { height: 60px; }
.dev-sw-site     .dev-web-hero-photo { height: 52px; }
.dev-sw-mob      .dev-web-hero-photo { height: 44px; }

/* On narrow screens (tablet/phone), hide the floating art card */
.dev-sw-site .dev-web-art-float,
.dev-sw-mob  .dev-web-art-float { display: none; }

/* Tablet/phone: pull hero to screen edges for full-bleed look */
.dev-sw-site .dev-web-hero-photo,
.dev-sw-mob  .dev-web-hero-photo {
  margin: -5px -5px 0;
  border-radius: 0;
}

/* Phone nav uses burger instead of full menu */
.dev-sw-mob .dev-web-hero-photo .dev-web-menu { display: none; }
.dev-sw-mob .dev-web-hero-photo .dev-web-burger { display: flex; }

/* ── Laptop / monitor website slide wrapper ── */
.dev-sw-site-lp {
  display: flex; flex-direction: column; gap: 5px;
  height: 100%; background: #fff;
}