/* 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;
}

.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-journey__intro {
  padding-top: 48px;
  padding-bottom: 20px;
}

.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: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.theme-journey__pane-head h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  color: #1a1a2e;
}

.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(2, 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: flex;
  flex-direction: column;
  gap: 0;
}

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

.theme-journey.is-revealed .theme-journey__step {
  opacity: 1;
  transform: translateX(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 {
  flex: 1;
  width: 3px;
  min-height: 28px;
  margin: 6px 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #93c5fd 0%, #dbeafe 100%);
}

.theme-journey__step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  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: 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 .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-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: 48px;
  height: 48px;
  margin-bottom: 12px;
  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-product-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -12px rgba(37, 99, 235, 0.25);
}

.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;
}

/* ===================================================
   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;
}

.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: 580px;
  height: 340px;
}
.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;
}
.dev-ground-l { width: 300px; left: 5px;   bottom: 100px; }
.dev-ground-m { width: 210px; left: 240px; bottom: 175px; }
.dev-ground-t { width: 132px; right: 0;   bottom: 100px; }
.dev-ground-p { width: 82px;  right: -10px; bottom: -8px; }

/* ─────────────────── DESKTOP MONITOR ─────────────────── */
.dev-monitor {
  position: absolute;
  left: 242px; top: 0;
  width: 196px;
  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: 108px; 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;
  left: 5px; top: 26px;
  width: 278px;
  z-index: 2;
  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: 162px; }

.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; }

/* Hero — two column (laptop) */
.dev-web-hero { display: flex; gap: 10px; align-items: center; padding: 6px 8px 2px; flex: 0 0 auto; }
.dev-web-hero-copy { flex: 1.15; display: flex; flex-direction: column; gap: 4px; }
.dev-web-eyebrow { width: 38px; height: 7px; border-radius: 7px; background: #dbeafe; }
.dev-web-h1 { width: 94%; height: 9px; border-radius: 3px; background: #1e293b; }
.dev-web-h1.short { width: 62%; }
.dev-web-p { width: 82%; height: 4px; border-radius: 2px; background: #cbd5e1; }
.dev-web-p.short { width: 58%; }
.dev-web-btns { display: flex; gap: 5px; margin-top: 4px; }
.dev-web-btn { width: 38px; height: 13px; border-radius: 7px; background: #3b82f6; box-shadow: 0 3px 8px rgba(37,99,235,.32); }
.dev-web-btn.ghost { background: #fff; border: 1px solid #cbd5e1; box-shadow: none; }
.dev-web-hero-art { flex: 1; }
.dev-web-art {
  background: linear-gradient(135deg,#1d4ed8,#7c3aed);
  border-radius: 8px; padding: 6px;
  box-shadow: 0 10px 24px rgba(37,99,235,.35);
  display: flex; flex-direction: column; gap: 4px;
}
.dev-web-art-top { display: flex; gap: 4px; }
.dev-web-art-top span { flex: 1; height: 10px; border-radius: 3px; 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); }

/* Hero banner — single column gradient (tablet/phone) */
.dev-web-hero-banner {
  position: relative;
  height: 50px; border-radius: 8px; padding: 8px;
  background: linear-gradient(135deg,#1d4ed8 0%, #7c3aed 100%);
  box-shadow: 0 8px 20px rgba(37,99,235,.3);
  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; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.dev-web-hero-banner.mob { height: 40px; padding: 7px; }
.dev-web-hero-banner.mob .dev-web-hb-btn { width: 30px; height: 9px; }

/* 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); box-shadow: 0 2px 6px rgba(37,99,235,.3); }
.dev-web-feat-ic.g { background: linear-gradient(135deg,#047857,#10b981); box-shadow: 0 2px 6px rgba(4,120,87,.3); }
.dev-web-feat-ic.o { background: linear-gradient(135deg,#c2410c,#f97316); box-shadow: 0 2px 6px rgba(194,65,12,.3); }
.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; }

/* Logos / trust strip */
.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;
  right: 2px; top: 14px;
  width: 128px;
  z-index: 3;
  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;
  right: -12px; bottom: 0;
  width: 78px;
  z-index: 4;
  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: 142px; 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: -14px; left: 85px;  animation: devChipFloat 4s ease-in-out infinite; }
.dev-chip-mobile  { bottom: 62px; left: -16px; animation: devChipFloat 4s ease-in-out infinite; animation-delay: -1.5s; }
.dev-chip-instant { top: 22px; right: -12px;  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); }
}

/* ── 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 — dark cinematic gradient mimicking a real photo */
.dev-web-hero-photo {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* deep ocean/night gradient — warm glow on right suggests a figure/light source */
  background:
    radial-gradient(ellipse 42% 90% at 82% 48%, rgba(255,175,80,.42) 0%, transparent 55%),
    radial-gradient(ellipse 32% 70% at 62% 52%, rgba(255,90,30,.18) 0%, transparent 48%),
    radial-gradient(ellipse 40% 55% at 12% 72%, rgba(0,105,185,.38) 0%, transparent 55%),
    linear-gradient(155deg, #060f22 0%, #0b1c3c 38%, #07162b 68%, #091d3a 100%);
}
/* Subtle vignette + bottom fade */
.dev-web-hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.22) 0%, transparent 38%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Warm-light silhouette hint on right third */
.dev-web-hero-photo::before {
  content: '';
  position: absolute;
  right: 16%; top: 5%; bottom: 0;
  width: 22%;
  background: radial-gradient(ellipse 55% 80% at 50% 40%, rgba(255,190,130,.35) 0%, transparent 65%);
  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: #eef2f7;
}