/* ============================================================
   PPTX-AS-WEBSITE MODE · Final canonical override
   Each section renders the master canonical PNG full-bleed.
   All copy is baked in the image. HTML text overlay is hidden
   visually (kept in DOM for SEO/a11y screen readers).
   Visible: nav, Telegram widget, intro animation, footer.
   Append-only. Loaded after styles.css to win cascade.
   ============================================================ */

/* 1 · Hide all section content overlays (except hero CTAs + footer + sr-only) */
.section .wrap,
.section .hero__content,
.section .hero__chips,
.section .block,
.section .pillars,
.section .steps,
.section .services,
.section .resources,
.section .testimonials,
.section .qa,
.section .lead,
.section h1, .section h2, .section h3,
.section p,
.section .eyebrow,
.section .rule-gold,
.section hr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* 2 · Make sections full viewport with PNG full-bleed clean */
.section {
  min-height: 100vh;
  position: relative;
  display: block;
}
.section__bg { position: absolute; inset: 0; z-index: 0; }
.section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@media (max-width: 768px) {
  .section__bg img { object-position: 58% center; }
}

/* 3 · Hide all veils (PNG already has its own composition) */
.section__veil,
.section__veil--right,
.section__veil--left,
.section__veil--bottom { display: none !important; }

/* 4 · Restore hero CTAs as INVISIBLE click hotspots on top of baked buttons */
.section--hero .hero__ctas,
.section--hero .hero__ctas a {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  pointer-events: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  z-index: 5;
}
.section--hero .hero__ctas {
  /* Position over the baked CTA buttons in the master PNG */
  left: 5%;
  bottom: 22%;
  width: 35%;
  height: 8%;
  display: flex;
  gap: 1%;
  white-space: normal !important;
}
.section--hero .hero__ctas a {
  flex: 1;
  height: 100%;
  cursor: pointer;
}

/* 5 · Final CTA section — same trick: invisible buttons over baked CTAs */
#final-cta .hero__ctas,
#final-cta .hero__ctas a,
.section--final .hero__ctas,
.section--final .hero__ctas a {
  position: absolute !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* 6 · Footer: keep visible (legal disclaimer mandatory + social icons + contact) */
footer.footer,
.footer,
body > footer {
  position: relative !important;
  z-index: 1;
}
footer.footer *,
.footer *,
body > footer * {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: revert !important;
  margin: revert !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  pointer-events: auto !important;
  font-size: revert !important;
  text-indent: 0 !important;
  color: revert !important;
  background: revert !important;
}

/* 7 · Keep header nav + logo visible + sticky */
header.hdr,
.hdr,
.hdr * {
  position: revert;
  pointer-events: auto !important;
}
.hdr { position: fixed !important; top: 0; left: 0; right: 0; z-index: 100; }
.hdr *:not(.hdr__nav):not(.hdr__nav *) {
  width: auto !important;
  height: auto !important;
  padding: revert !important;
  margin: revert !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  font-size: revert !important;
  text-indent: 0 !important;
  color: revert !important;
}

/* 8 · Telegram widget always visible + clickable */
.tg, a.tg {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 60px !important;
  height: 60px !important;
  clip: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 90 !important;
}

/* 9 · Intro animation untouched */
.intro,
.intro * {
  position: revert;
  width: revert;
  height: revert;
  clip: auto;
  overflow: revert;
  pointer-events: revert;
}

/* 10 · Mobile: show each PNG fully (contain, not cover) so baked layout reads */
@media (max-width: 900px) {
  .section { min-height: 0 !important; aspect-ratio: 16/9; height: auto !important; }
  .section__bg { position: relative !important; height: auto; aspect-ratio: 16/9; }
  .section__bg img { object-fit: cover !important; object-position: center center !important; height: 100% !important; aspect-ratio: 16/9; }
}
@media (max-width: 480px) {
  .section { aspect-ratio: 4/3; }
  .section__bg, .section__bg img { aspect-ratio: 4/3; }
}

/* 11 · Smooth scroll snap (optional cinematic feel) */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }