/* 3CX: content-specific layouts built on the shared Cloud Call Center design system. */
.centraly-page-three .hero-visual {
  position: relative;
  min-width: 0;
  min-height: 430px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--centraly-radius-lg);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px rgba(3, 12, 7, .3);
  backdrop-filter: blur(10px);
}

.centraly-page-three .browser-frame {
  position: absolute;
  inset: 26px 24px auto;
  overflow: hidden;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--centraly-shadow);
}

.centraly-page-three .browser-top {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 30px;
  padding-inline: 12px;
  border-radius: 12px 12px 0 0;
  background: var(--centraly-soft);
}

.centraly-page-three .browser-top i { width: 8px; height: 8px; border-radius: 50%; background: #c7ccd1; }
.centraly-page-three .browser-top i:first-child { background: #ef6a68; }
.centraly-page-three .browser-top i:nth-child(2) { background: #efc34a; }
.centraly-page-three .browser-top i:nth-child(3) { background: #61c276; }
.centraly-page-three .browser-frame > img { width: 100%; aspect-ratio: 16 / 10; border-radius: 0 0 12px 12px; object-fit: cover; object-position: top; }

.centraly-page-three .mobile-card,
.centraly-page-three .wallboard-card,
.centraly-page-three .partner-chip {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--centraly-border);
  background: #fff;
  box-shadow: 0 18px 45px rgba(3, 12, 7, .2);
}

.centraly-page-three .mobile-card { inset: auto auto 10px 10px; width: 165px; border-radius: 20px; }
.centraly-page-three .wallboard-card { inset: auto -8px -6px auto; width: 225px; border-radius: 18px; }
.centraly-page-three .partner-chip { inset: -18px -6px auto auto; width: 112px; border-radius: 16px; background: #333; }
.centraly-page-three :is(.mobile-card, .wallboard-card, .partner-chip) img { width: 100%; border-radius: 12px; }

.centraly-page-three .threecx-hero-benefits { padding-block: 30px; background: #fff; }
.centraly-page-three .hero-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.centraly-page-three .hero-benefit-grid article {
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: 74px;
  padding: 16px 18px;
  border: 1px solid var(--centraly-border);
  border-radius: 18px;
  background: var(--centraly-soft);
  box-shadow: 0 12px 34px rgba(31, 54, 39, .07);
}
.centraly-page-three .hero-benefit-grid strong { color: var(--centraly-heading); font-size: .84rem; line-height: 1.65; }

.centraly-page-three .outcome {
  padding-block: 44px;
  background: radial-gradient(circle at 8% 0, rgba(124, 181, 100, .12), transparent 30%), var(--centraly-soft);
}

.centraly-page-three .outcome-card {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--centraly-border);
  border-radius: var(--centraly-radius);
  background: #fff;
  box-shadow: var(--centraly-shadow);
}

.centraly-page-three .outcome-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  color: rgba(255, 255, 255, .72);
  background: linear-gradient(135deg, #18251d, var(--centraly-primary));
}

.centraly-page-three .outcome-title strong { color: #fff; font-size: 1.25rem; line-height: 1.35; }
.centraly-page-three .outcome-title span { margin-top: 5px; font-size: .8rem; }
.centraly-page-three .outcome-item { padding: 22px 16px; border-inline-start: 1px solid var(--centraly-border); text-align: center; }
.centraly-page-three .outcome-item b { display: block; margin-bottom: 4px; color: var(--centraly-heading); font-size: .9rem; }
.centraly-page-three .outcome-item > span { color: var(--centraly-muted); font-size: .75rem; line-height: 1.6; }
.centraly-page-three .outcome-icon,
.centraly-page-three .feature-icon {
  display: grid;
  place-items: center;
  color: var(--centraly-primary);
  border: 1px solid rgba(124, 181, 100, .18);
  background: var(--centraly-tint);
}
.centraly-page-three .outcome-icon { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px; }
.centraly-page-three .outcome-icon svg { width: 23px; height: 23px; }

.centraly-page-three .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 42px; align-items: center; }
.centraly-page-three .copy h3,
.centraly-page-three .analytics-copy h3 { margin: 12px 0; font-size: clamp(1.7rem, 3vw, 2.1875rem); }
.centraly-page-three .copy > p,
.centraly-page-three .analytics-copy > p { color: var(--centraly-muted); font-size: .94rem; }
.centraly-page-three .bullets { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.centraly-page-three .bullets li { display: flex; gap: 12px; align-items: flex-start; color: var(--centraly-text); font-size: .88rem; }
.centraly-page-three .bullets li::before { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--centraly-primary); background: var(--centraly-tint); content: "✓"; font-size: .72rem; font-weight: 900; }

.centraly-page-three .media-stage,
.centraly-page-three .cc-showcase,
.centraly-page-three :is(.gallery-card, .video-main, .video-sub) {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--centraly-border);
  border-radius: var(--centraly-radius);
  background: #fff;
  box-shadow: var(--centraly-shadow);
}
.centraly-page-three .media-stage { min-height: 480px; background: var(--centraly-soft); }
.centraly-page-three .media-stage > img { width: 100%; height: 100%; max-height: 445px; object-fit: contain; }
.centraly-page-three .mini-stat { position: absolute; z-index: 2; padding: 11px 13px; border: 1px solid var(--centraly-border); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(31, 54, 39, .09); }
.centraly-page-three .mini-stat b { display: block; color: var(--centraly-primary); font-size: 1rem; }
.centraly-page-three .mini-stat span { color: var(--centraly-muted); font-size: .7rem; }
.centraly-page-three .mini-stat.one { inset: 18px 18px auto auto; }
.centraly-page-three .mini-stat.two { inset: auto auto 18px 18px; }

.centraly-page-three .section-head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.centraly-page-three .section-head h2 { margin: 12px 0 14px; font-size: clamp(1.75rem, 3vw, 2.1875rem); }
.centraly-page-three .section-head p { max-width: 720px; margin: 0 auto; color: var(--centraly-muted); font-size: 1.05rem; }
.centraly-page-three .section.dark { color: rgba(255, 255, 255, .72); background: radial-gradient(circle at 10% 10%, rgba(124, 181, 100, .22), transparent 30%), linear-gradient(135deg, #18251d, var(--centraly-primary)); }
.centraly-page-three .dark :is(h2, h3, h4) { color: #fff; }
.centraly-page-three .dark .section-head p,
.centraly-page-three .dark .analytics-copy > p { color: rgba(255, 255, 255, .68); }
.centraly-page-three .dark .eyebrow { color: #eaf4e5; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .09); }
.centraly-page-three .accent { color: #bfe3ae; }

.centraly-page-three .cc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; }
.centraly-page-three .cc-showcase { min-height: 470px; display: flex; align-items: center; }
.centraly-page-three .cc-showcase img { width: 100%; border-radius: 15px; }
.centraly-page-three .cc-side { display: grid; gap: 16px; }
.centraly-page-three .dark-card { padding: 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--centraly-radius); background: rgba(255, 255, 255, .07); }
.centraly-page-three .dark-card h3 { margin: 10px 0 8px; font-size: 1.35rem; }
.centraly-page-three .dark-card p { color: rgba(255, 255, 255, .68); font-size: .88rem; }
.centraly-page-three .dark-card ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; color: rgba(255, 255, 255, .82); font-size: .82rem; list-style: none; }
.centraly-page-three .dark-card li::before { margin-inline-end: 8px; color: #bfe3ae; content: "●"; }
.centraly-page-three .wallboard-inline { padding: 10px; border-radius: 18px; background: #fff; }
.centraly-page-three .wallboard-inline img { border-radius: 12px; }

.centraly-page-three .feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.centraly-page-three .feature,
.centraly-page-three .step {
  position: relative;
  padding: 26px;
  border: 1px solid var(--centraly-border);
  border-radius: var(--centraly-radius);
  background: #fff;
  box-shadow: var(--centraly-shadow);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.centraly-page-three :is(.feature, .step):hover { transform: translateY(-5px); border-color: rgba(124, 181, 100, .48); box-shadow: var(--centraly-shadow-hover); }
.centraly-page-three .feature-icon { width: 56px; height: 56px; margin-bottom: 14px; border-radius: 17px; }
.centraly-page-three .feature-icon svg { width: 26px; height: 26px; }
.centraly-page-three .feature h4 { margin: 0 0 9px; font-size: 1.12rem; }
.centraly-page-three .feature p,
.centraly-page-three .step p { margin-bottom: 0; color: var(--centraly-muted); font-size: .9rem; }

.centraly-page-three .analytics-layout { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 34px; align-items: center; }
.centraly-page-three .dashboard-stack { position: relative; min-height: 540px; }
.centraly-page-three .dash-main,
.centraly-page-three .dash-small { position: absolute; padding: 10px; border-radius: var(--centraly-radius); background: #fff; box-shadow: 0 24px 60px rgba(3, 12, 7, .25); }
.centraly-page-three .dash-main { inset: 28px 38px auto 0; }
.centraly-page-three .dash-small { inset: auto 0 12px auto; width: 52%; }
.centraly-page-three :is(.dash-main, .dash-small) img { border-radius: 14px; }
.centraly-page-three .ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.centraly-page-three .ai-card { padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .07); }
.centraly-page-three .ai-card b { display: block; margin-bottom: 3px; color: #bfe3ae; font-size: .86rem; }
.centraly-page-three .ai-card span { color: rgba(255, 255, 255, .68); font-size: .78rem; }

.centraly-page-three .omni-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; }
.centraly-page-three .gallery-card { display: flex; min-height: 400px; align-items: center; justify-content: center; }
.centraly-page-three .gallery-card img { max-height: 390px; border-radius: 14px; object-fit: contain; cursor: zoom-in; }
.centraly-page-three .gallery-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.centraly-page-three .gallery-stack .gallery-card { min-height: 190px; }
.centraly-page-three .gallery-stack .gallery-card img { max-height: 205px; }
.centraly-page-three .gallery-label { position: absolute; z-index: 2; inset: 16px 16px auto auto; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--centraly-primary); font-size: .7rem; font-weight: 800; }

.centraly-page-three .video-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; }
.centraly-page-three :is(.video-main, .video-sub) { display: flex; align-items: center; justify-content: center; }
.centraly-page-three :is(.video-main, .video-sub) img { max-height: 500px; border-radius: 14px; object-fit: contain; cursor: zoom-in; }
.centraly-page-three .video-side { display: grid; gap: 20px; }
.centraly-page-three .video-sub { min-height: 235px; }
.centraly-page-three .video-sub img { max-height: 225px; }

.centraly-page-three .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: threecx-step; }
.centraly-page-three .step { overflow: hidden; counter-increment: threecx-step; }
.centraly-page-three .step::before { position: absolute; inset: 7px auto auto 16px; color: rgba(124, 181, 100, .11); content: "0" counter(threecx-step); font-size: 4rem; font-weight: 900; line-height: 1; }
.centraly-page-three .step b { display: block; margin-bottom: 8px; color: var(--centraly-heading); font-size: 1.05rem; }

.centraly-page-three .cta-section { padding-block: var(--centraly-section-space); background: var(--centraly-soft); }
.centraly-page-three .cta-box { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 34px; align-items: start; }
.centraly-page-three .cta-copy { padding: 28px; border-radius: var(--centraly-radius-lg); color: rgba(255, 255, 255, .7); background: radial-gradient(circle at 10% 10%, rgba(124, 181, 100, .22), transparent 30%), linear-gradient(135deg, #18251d, var(--centraly-primary)); box-shadow: var(--centraly-shadow); }
.centraly-page-three .cta-copy .eyebrow { color: #eaf4e5; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .09); }
.centraly-page-three .cta-copy h2 { margin: 12px 0; color: #fff; font-size: clamp(1.7rem, 3vw, 2.1875rem); }
.centraly-page-three .cta-copy p { color: rgba(255, 255, 255, .68); font-size: .94rem; }
.centraly-page-three .contact-lines { display: grid; gap: 10px; margin-top: 22px; }
.centraly-page-three .contact-lines a { color: #eaf4e5; font-size: .84rem; font-weight: 800; overflow-wrap: anywhere; }
.centraly-page-three .contact-lines .phone-link { display: flex; gap: 7px; align-items: center; justify-self: start; direction: ltr; }
.centraly-page-three input[dir="ltr"] { text-align: left; }
.centraly-page-three .lead-form { padding: 28px; border: 1px solid var(--centraly-border); border-radius: var(--centraly-radius); background: #fff; box-shadow: var(--centraly-shadow); }
.centraly-page-three .lead-form .btn { width: 100%; margin-top: 16px; }

.centraly-page-three .whatsapp-float { position: fixed; z-index: 20; inset-inline-end: 20px; bottom: 20px; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: #fff; background: #25d366; box-shadow: 0 12px 30px rgba(20, 90, 48, .26); transition: transform .2s ease; }
.centraly-page-three .whatsapp-float:hover { color: #fff; transform: translateY(-3px); }
.centraly-page-three .whatsapp-float svg { width: 27px; height: 27px; }
.centraly-page-three .reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

.centraly-page-three .lightbox { position: fixed; z-index: 100; inset: 0; display: none; align-items: center; justify-content: center; padding: 30px; background: rgba(10, 12, 14, .92); }
.centraly-page-three .lightbox.open { display: flex; }
.centraly-page-three .lightbox img { max-width: min(1400px, 95vw); max-height: 90vh; border-radius: 18px; background: #fff; object-fit: contain; }
.centraly-page-three .lightbox button { position: absolute; inset: 22px auto auto 22px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: #111; background: #fff; font-size: 1.6rem; cursor: pointer; }

body.centraly-threecx-template main + [data-block^="hook:"] { display: none !important; }

@media (max-width: 1199px) {
  .centraly-page-three .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .centraly-page-three .hero-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .centraly-page-three .outcome-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .centraly-page-three .outcome-title { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .centraly-page-three :is(.split, .cc-grid, .analytics-layout, .omni-grid, .video-grid, .cta-box) { grid-template-columns: 1fr; }
  .centraly-page-three .hero-visual { width: min(100%, 760px); min-height: 490px; }
  .centraly-page-three .dashboard-stack { min-height: 590px; }
  .centraly-page-three .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .centraly-page-three .section-head { margin-bottom: 32px; }
  .centraly-page-three .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .centraly-page-three .hero-visual { min-height: 420px; }
  .centraly-page-three .mobile-card { width: 155px; }
  .centraly-page-three .wallboard-card { width: 205px; }
  .centraly-page-three .partner-chip { width: 90px; }
  .centraly-page-three .cta-copy { padding: 24px; }
}

@media (max-width: 640px) {
  .centraly-page-three :is(.feature-grid, .steps, .ai-grid, .gallery-stack, .form-grid) { grid-template-columns: 1fr; }
  .centraly-page-three .hero-benefit-grid { grid-template-columns: 1fr; }
  .centraly-page-three .outcome-card { grid-template-columns: 1fr; }
  .centraly-page-three .outcome-title { grid-column: auto; }
  .centraly-page-three .outcome-item { border-top: 1px solid var(--centraly-border); border-inline-start: 0; }
  .centraly-page-three .hero-visual { min-height: 330px; }
  .centraly-page-three .browser-frame { inset: 26px 8px auto; }
  .centraly-page-three .mobile-card { inset: auto auto 6px -4px; width: 105px; }
  .centraly-page-three .wallboard-card { inset: auto -4px -5px auto; width: 145px; }
  .centraly-page-three .media-stage { min-height: 360px; }
  .centraly-page-three .cc-showcase { min-height: 320px; }
  .centraly-page-three .dashboard-stack { min-height: 400px; }
  .centraly-page-three .dash-main { inset: 15px 0 auto; }
  .centraly-page-three .dash-small { width: 58%; }
  .centraly-page-three .gallery-card { min-height: 270px; }
  .centraly-page-three .lead-form,
  .centraly-page-three .feature,
  .centraly-page-three .step { padding: 22px; }
  .centraly-page-three .whatsapp-float { width: 48px; height: 48px; }
}