html,
body {
  min-height: 100dvh;
}

body {
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .slide.active .animate-in,
  .slide.active .loss-stage.animate-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.presentation {
  height: 100dvh;
}

.slide {
  height: 100dvh;
  overflow: hidden;
  justify-content: flex-start !important;
  padding-left: max(20px, min(5vw, 72px), env(safe-area-inset-left));
  padding-right: max(20px, min(5vw, 72px), env(safe-area-inset-right));
  padding-bottom: max(88px, calc(76px + env(safe-area-inset-bottom)));
}

.nav-controls {
  max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}

.fit-inner {
  transform-origin: top center;
  will-change: transform;
}

.title-channels {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid rgba(27, 91, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(232, 239, 255, 0.95), rgba(224, 251, 245, 0.95)),
    var(--surface);
  color: var(--text);
  font-size: clamp(17px, 1.4vw, 23px);
  font-weight: 700;
  line-height: 1.32;
  box-shadow: 0 18px 46px rgba(27, 91, 255, 0.11);
}

.title-channels span {
  display: inline-block;
}

.title-channels strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-size: .92em;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(27, 91, 255, 0.22);
}

.problem-card p,
.pain-item p,
.journey-came p,
.journey-lost li,
.journey-solution span,
.loss-stage li,
.loss-badge,
.loss-summary span,
.economics-card p,
.economics-card strong,
.economics-formula p,
.timeline-step p,
.channel-badge,
.info-box p,
.arch-block p,
.integration-tag,
.circle-card p,
.logic-box,
.stage-list li,
.clinic-benefit,
.case-info p,
.case-type,
.case-tech,
.metric-label,
.pilot-item p,
.roadmap-step p,
.checklist-item span,
.cta-footer p {
  font-size: clamp(16.5px, 1.065vw, 21px) !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
}

.metric-label,
.case-type,
.case-tech,
.loss-badge,
.economics-card strong,
.integration-tag,
.channel-badge,
.checklist-item span {
  font-weight: 800;
}

.economics-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

.economics-card .economics-step {
  grid-column: 1;
  margin: 0 !important;
}

.economics-card h3 {
  grid-column: 2;
  align-self: center;
  margin: 0 !important;
}

.economics-card p,
.economics-card strong {
  grid-column: 1 / -1;
}

.timeline-step {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

.timeline-step .step-num {
  grid-column: 1;
  margin: 0 !important;
}

.timeline-step h3 {
  grid-column: 2;
  align-self: center;
  margin: 0 !important;
}

.timeline-step p,
.timeline-step .channel-badges {
  grid-column: 1 / -1;
  margin-top: 14px;
}

.channel-badges {
  align-items: stretch;
}

.channel-badge {
  min-width: 0;
}

.channel-logo {
  flex-shrink: 0;
}

.channel-logo img,
.channel-logo svg {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.clinic-logo-img {
  display: block;
  width: min(245px, 100%);
  max-height: 88px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 12px;
}

.case-logo-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.case-logo-group .clinic-logo-img {
  width: min(172px, calc(50% - 8px));
  max-height: 64px;
  margin-bottom: 0;
}

.clinic-logo-img-kids {
  width: min(172px, calc(50% - 8px));
  max-height: 58px;
}

.clinic-logo-img-atmosfera {
  width: min(230px, 100%);
  max-height: 76px;
}

.clinic-logo-img-3dgastro {
  width: min(178px, 100%);
  max-height: 104px;
}

.clinic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.clinic-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 15px;
  border: 1px solid rgba(27, 91, 255, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 239, 255, 0.95), rgba(224, 251, 245, 0.95));
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(27, 91, 255, 0.08);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.clinic-link-button:hover {
  transform: translateY(-2px);
  border-color: rgba(27, 91, 255, 0.42);
  box-shadow: 0 14px 30px rgba(27, 91, 255, 0.14);
}

.metric-value,
.circle-num,
h1,
h2 {
  overflow-wrap: anywhere;
}

.slide-title .title-content {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
}

@media (max-height: 720px), (orientation: landscape) and (max-width: 960px) {
  .slide {
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 78px;
  }

  .slide-header {
    margin-bottom: 14px;
  }

  h1,
  h2 {
    margin-bottom: 12px;
  }

  .subtitle {
    margin-bottom: 8px;
  }

  .title-content {
    align-items: start;
  }
}

@media (max-width: 480px) {
  .slide {
    padding: 22px 20px 86px;
  }

  h1 {
    font-size: clamp(30px, 10.4vw, 44px);
    line-height: 1.08;
  }

  h2 {
    font-size: clamp(24px, 8.1vw, 34px);
  }

  .title-channels {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .benefit-item {
    align-items: flex-start;
    font-size: 16px;
  }

  .title-scale,
  .journey-solution,
  .info-box,
  .logic-box,
  .clinic-benefits,
  .cta-footer {
    padding: 20px;
    border-radius: 18px;
  }

  .case-info,
  .problem-card,
  .stage-card,
  .checklist {
    padding: 22px;
  }

  .metric {
    padding: 18px;
  }

  .metric-value {
    font-size: 30px;
  }

  .nav-controls {
    width: auto;
    transform: translateX(-50%) scale(0.9);
    transform-origin: bottom center;
  }
}

@media (min-width: 1800px) {
  .slide {
    padding-left: calc((100vw - 1680px) / 2);
    padding-right: calc((100vw - 1680px) / 2);
  }
}

@media (min-width: 2400px) {
  .slide {
    padding-top: 92px;
    padding-bottom: 128px;
    padding-left: calc((100vw - 2040px) / 2);
    padding-right: calc((100vw - 2040px) / 2);
  }

  h1 {
    font-size: clamp(72px, 3.4vw, 128px);
  }

  h2 {
    font-size: clamp(56px, 2.5vw, 86px);
  }

  h3 {
    font-size: clamp(24px, 1.3vw, 36px);
  }

  .subtitle,
  .title-channels,
  .benefit-item,
  .logic-box,
  .cta-footer p {
    font-size: clamp(22px, 1vw, 30px);
  }

  .metric-value {
    font-size: 46px;
  }

  .metric.highlight .metric-value {
    font-size: 54px;
  }

  .metric-label,
  .timeline-step p,
  .stage-list li,
  .pilot-item p,
  .case-info p {
    font-size: 18px;
  }
}

@media (max-width: 1100px),
       (max-height: 760px),
       (max-width: 820px) and (orientation: portrait),
       (max-width: 940px) and (max-height: 520px) and (orientation: landscape) {
  html,
  body {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    overscroll-behavior-y: auto;
    background: var(--bg);
  }

  .presentation {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .slide {
    position: relative !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    display: block !important;
    padding: max(26px, env(safe-area-inset-top)) 20px max(112px, calc(108px + env(safe-area-inset-bottom))) !important;
  }

  .fit-inner {
    width: 100% !important;
    transform: none !important;
    will-change: auto;
  }

  .slide-header {
    margin-bottom: 22px;
  }

  .logo {
    font-size: 14px;
  }

  .logo-mark {
    width: 28px;
    height: 28px;
  }

  h1,
  h2 {
    max-width: 100%;
    margin-bottom: 18px;
    letter-spacing: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

  h1 {
    font-size: 38px !important;
    line-height: 1.08;
  }

  h2 {
    font-size: 32px !important;
    line-height: 1.12;
  }

  h3 {
    font-size: 21px !important;
    line-height: 1.22;
  }

  .subtitle {
    max-width: none;
    margin-bottom: 22px;
    font-size: 18px !important;
    line-height: 1.45;
  }

  .title-content,
  .journey-layout,
  .case-detail,
  .cta-content {
    display: block !important;
  }

  .title-visual {
    display: none !important;
  }

  .title-channels {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0 24px;
    padding: 18px 18px;
    border-radius: 20px;
    font-size: 17px !important;
    line-height: 1.38;
  }

  .title-channels strong {
    min-width: 72px;
    padding: 8px 12px;
    font-size: 16px;
  }

  .title-benefits {
    gap: 14px;
    margin-top: 22px;
  }

  .benefit-item,
  .clinic-benefit,
  .checklist-item {
    font-size: 16px !important;
    line-height: 1.45;
  }

  .benefit-icon,
  .clinic-benefit-icon,
  .check-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .problems-grid,
  .pains-grid,
  .loss-map,
  .timeline,
  .stages-grid,
  .pilot-grid,
  .metrics-grid,
  .clinic-benefits-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .loss-map {
    margin-top: 24px;
  }

  .loss-map::before {
    display: none;
  }

  .loss-stage {
    min-height: auto;
    gap: 16px;
  }

  .loss-stage h3 {
    font-size: 21px !important;
  }

  .loss-stage li {
    font-size: clamp(16.5px, 2.025vw, 19.5px) !important;
    line-height: 1.34 !important;
  }

  .loss-badge {
    font-size: 13px;
    padding: 9px 12px;
  }

  .loss-summary {
    display: block;
    padding: 22px !important;
  }

  .loss-summary strong {
    display: block;
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .loss-summary span {
    display: block;
    max-width: none;
    font-size: clamp(16.5px, 2.025vw, 19.5px) !important;
    line-height: 1.34;
  }

  .timeline::before {
    display: none;
  }

  .architecture,
  .scale-circles:not(.funnel-flow) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .channel-badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .channel-badge {
    min-height: 62px !important;
    padding: 10px 11px !important;
    gap: 11px !important;
    overflow: visible !important;
  }

  .channel-badge.wide {
    grid-column: 1 / -1 !important;
  }

  .channel-logo {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .channel-logo img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
  }

  .channel-logo.site svg {
    width: 23px !important;
    height: 23px !important;
  }

  .channel-logo.max img {
    width: 38px !important;
    height: 38px !important;
  }

  .scale-circles.funnel-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    position: relative;
    margin: 28px 0 24px !important;
    padding: 8px 0 !important;
  }

  .scale-circles.funnel-flow::before {
    display: block !important;
    content: '';
    position: absolute;
    inset: 18px auto 18px 50% !important;
    width: min(210px, 58vw) !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 32px !important;
    background:
      linear-gradient(180deg, rgba(27, 91, 255, 0.13), rgba(0, 201, 167, 0.22)),
      radial-gradient(circle at 50% 12%, rgba(27, 91, 255, 0.16), transparent 34%),
      radial-gradient(circle at 50% 88%, rgba(0, 201, 167, 0.18), transparent 36%) !important;
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%) !important;
    z-index: 0 !important;
    opacity: 1 !important;
    pointer-events: none;
  }

  .scale-circles.funnel-flow .circle-card {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
  }

  .arch-arrow {
    align-self: center;
    transform: rotate(90deg);
  }

  .journey-came,
  .journey-lost,
  .journey-solution,
  .loss-stage,
  .loss-summary,
  .info-box,
  .logic-box,
  .clinic-benefits,
  .case-info,
  .problem-card,
  .pain-item,
  .timeline-step,
  .arch-block,
  .circle-card,
  .stage-card,
  .pilot-item,
  .metric,
  .checklist,
  .roadmap-step,
  .cta-footer,
  .integrations {
    padding: 22px !important;
    border-radius: 18px !important;
  }

  .case-info p,
  .problem-card p,
  .pain-item p,
  .timeline-step p,
  .channel-badge,
  .arch-block p,
  .integration-tag,
  .circle-card p,
  .stage-list li,
  .clinic-benefit,
  .pilot-item p,
  .roadmap-step p,
  .checklist-item span,
  .metric-label,
  .case-type,
  .lost-list li,
  .info-box p,
  .logic-box,
  .cta-footer p {
    font-size: clamp(16.5px, 2.025vw, 19.5px) !important;
    line-height: 1.34 !important;
  }

  .metric-value {
    font-size: 34px !important;
    line-height: 1.05;
  }

  .metric.highlight .metric-value {
    font-size: 38px !important;
  }

  .pain-item h4,
  .pilot-item h4,
  .roadmap-step h4 {
    font-size: 17px !important;
  }

  .clinic-links {
    gap: 10px;
    margin-top: 18px;
  }

  .clinic-link-button {
    min-height: 42px;
    padding: 11px 16px;
    font-size: 14px;
  }

  .clinic-logo-img {
    width: min(250px, 100%);
    max-height: 92px;
  }

  .case-logo-group .clinic-logo-img {
    width: min(250px, 100%);
    max-height: 92px;
  }

  .clinic-logo-img-kids {
    width: min(238px, 100%);
    max-height: 60px;
  }

  .case-logo-group .clinic-logo-img-kids {
    width: min(238px, 100%);
    max-height: 60px;
  }

  .clinic-logo-img-3dgastro {
    width: min(168px, 100%);
    max-height: 100px;
  }

  .nav-controls {
    position: fixed;
    width: auto;
    transform: translateX(-50%) scale(0.96);
    transform-origin: bottom center;
  }

  .keyboard-hint {
    display: none !important;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  .slide {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  h1 {
    font-size: 34px !important;
  }

  h2 {
    font-size: 29px !important;
  }

  .subtitle {
    font-size: 17px !important;
  }
}

body.is-swipe-transitioning {
  overflow: hidden !important;
  pointer-events: none;
  touch-action: none;
}

body.is-swipe-transitioning > .presentation {
  position: fixed !important;
  top: calc(var(--swipe-scroll-y, 0px) * -1) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  overflow: visible !important;
  z-index: 999 !important;
  will-change: transform, opacity;
}

.swipe-reader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
  perspective: 1200px;
  contain: strict;
}

.swipe-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.swipe-page-current .presentation {
  position: absolute !important;
  top: calc(var(--swipe-scroll-y, 0px) * -1) !important;
  left: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
}

.swipe-page-next iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}

.swipe-page::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 27, 45, 0.22), transparent 22%, transparent 78%, rgba(15, 27, 45, 0.14));
}

.swipe-reader.reader-left .swipe-page-next {
  transform: translate3d(100%, 0, 0);
}

.swipe-reader.reader-right .swipe-page-next {
  transform: translate3d(-100%, 0, 0);
}

.swipe-reader.reader-up .swipe-page-next {
  transform: translate3d(0, 100%, 0);
}

.swipe-reader.reader-down .swipe-page-next {
  transform: translate3d(0, -100%, 0);
}

.swipe-reader.reader-left.is-animating .swipe-page-current {
  animation: readerCurrentLeft 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-left.is-animating .swipe-page-next {
  animation: readerNextLeft 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-right.is-animating .swipe-page-current {
  animation: readerCurrentRight 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-right.is-animating .swipe-page-next {
  animation: readerNextRight 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-up.is-animating .swipe-page-current {
  animation: readerCurrentUp 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-up.is-animating .swipe-page-next {
  animation: readerNextUp 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-down.is-animating .swipe-page-current {
  animation: readerCurrentDown 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.reader-down.is-animating .swipe-page-next {
  animation: readerNextDown 760ms cubic-bezier(0.22, 0.78, 0.22, 1) forwards;
}

.swipe-reader.is-animating .swipe-page-current::after,
.swipe-reader.is-animating .swipe-page-next::after {
  animation: readerPageShadow 760ms ease forwards;
}

@keyframes readerCurrentLeft {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(-48%, 0, 0); opacity: 0.68; }
}

@keyframes readerNextLeft {
  from { transform: translate3d(100%, 0, 0); opacity: 0.96; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes readerCurrentRight {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(48%, 0, 0); opacity: 0.68; }
}

@keyframes readerNextRight {
  from { transform: translate3d(-100%, 0, 0); opacity: 0.96; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes readerCurrentUp {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(0, -36%, 0); opacity: 0.72; }
}

@keyframes readerNextUp {
  from { transform: translate3d(0, 100%, 0); opacity: 0.92; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes readerCurrentDown {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(0, 36%, 0); opacity: 0.72; }
}

@keyframes readerNextDown {
  from { transform: translate3d(0, -100%, 0); opacity: 0.92; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes readerPageShadow {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

.swipe-reader.is-animating .swipe-page {
  animation: none !important;
}

body.swipe-exit-left .presentation {
  animation: swipeExitLeft 520ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards !important;
}

body.swipe-exit-right .presentation {
  animation: swipeExitRight 520ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards !important;
}

body.swipe-exit-up .presentation {
  animation: swipeExitUp 520ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards !important;
}

body.swipe-exit-down .presentation {
  animation: swipeExitDown 520ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards !important;
}

@keyframes swipeExitLeft {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0.42;
    transform: translateX(-82vw) scale(0.965);
  }
}

@keyframes swipeExitRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0.42;
    transform: translateX(82vw) scale(0.965);
  }
}

@keyframes swipeExitUp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0.42;
    transform: translateY(-68vh) scale(0.965);
  }
}

@keyframes swipeExitDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0.42;
    transform: translateY(68vh) scale(0.965);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  html,
  body,
  .presentation,
  .slide {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .nav-controls,
  .keyboard-hint,
  .progress-bar {
    display: none !important;
  }

  .slide {
    position: relative;
    page-break-after: always;
    padding: 36px;
  }
}
