/*
 * Ibtikar Tech — Homepage Surface Refinement V1
 * Removes the legacy announcement bars and keeps customer-review/lower sections
 * on the same dark visual surface as the homepage instead of switching to light.
 * Frontend-only; no backend or content-model changes.
 */

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BARS
   The homepage still carries two legacy announcement layers from the approved
   source. The shared site header already provides the primary navigation/CTA,
   so these bars are intentionally removed from the rendered experience.
   -------------------------------------------------------------------------- */
body.source-home .announcement,
body.source-home .ibtx-announcement {
  display: none !important;
}

/* Do not reserve legacy top-bar space after the announcement is removed. */
body.source-home {
  --announcement-h: 0px !important;
}

/* --------------------------------------------------------------------------
   HOMEPAGE BASE SURFACE
   Keep the page anchored to the same deep navy surface. The cinematic runtime
   may update its ambient CSS variable while scrolling; this override prevents
   a white/light canvas from flashing behind or between late-page sections.
   -------------------------------------------------------------------------- */
body.source-home,
body.source-home main,
body.source-home .cinematic-ambient-bg {
  background-color: #050817 !important;
}

body.source-home .cinematic-ambient-bg {
  background-image:
    radial-gradient(circle at 14% 18%, rgba(16, 200, 232, .055), transparent 29rem),
    radial-gradient(circle at 86% 22%, rgba(124, 58, 237, .06), transparent 31rem) !important;
}

/* --------------------------------------------------------------------------
   CUSTOMER REVIEWS + FOLLOWING SECTION
   These selectors support both the current source and the earlier approved
   homepage structure where testimonials are present before the final sections.
   -------------------------------------------------------------------------- */
body.source-home #testimonials,
body.source-home section#testimonials,
body.source-home #testimonials + section,
body.source-home .testimonials-section,
body.source-home .ibtx-testimonials-section,
body.source-home #faq,
body.source-home .faq-section {
  background: #050817 !important;
  background-image: none !important;
  color: var(--text, #f8fafc) !important;
}

/* Remove soft/light hand-off strips around the two sections. */
body.source-home #testimonials::before,
body.source-home #testimonials::after,
body.source-home #testimonials + section::before,
body.source-home #testimonials + section::after,
body.source-home #faq::before,
body.source-home #faq::after,
body.source-home .faq-section::before,
body.source-home .faq-section::after {
  background: none !important;
  background-image: none !important;
}

/* Keep review cards and FAQ items readable as elevated surfaces without turning
   the whole section into a different theme. */
body.source-home .testimonial,
body.source-home .ibtx-testimonial-card,
body.source-home #testimonials article,
body.source-home .faq-section .accordion-item,
body.source-home #faq .accordion-item {
  background: color-mix(in srgb, #111a33 92%, transparent) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  color: #f8fafc !important;
}

body.source-home .testimonial p,
body.source-home .ibtx-testimonial-card blockquote,
body.source-home .client small,
body.source-home .faq-section p,
body.source-home #faq p {
  color: #a8b1c5 !important;
}

body.source-home .client strong,
body.source-home .faq-section h2,
body.source-home .faq-section h3,
body.source-home #faq h2,
body.source-home #faq h3,
body.source-home #faq button,
body.source-home .faq-section button {
  color: #f8fafc !important;
}

/* If the section immediately after testimonials is the final CTA, only its
   outer canvas stays dark; the CTA card itself retains the branded gradient. */
body.source-home #testimonials + .cta-section,
body.source-home .faq-section + .cta-section,
body.source-home #faq + .cta-section,
body.source-home .cta-section {
  background: #050817 !important;
  background-image: none !important;
}

/* Responsive behavior remains purely fluid; no light fallback at small widths. */
@media (max-width: 820px) {
  body.source-home #testimonials,
  body.source-home #testimonials + section,
  body.source-home #faq,
  body.source-home .faq-section,
  body.source-home .cta-section {
    background: #050817 !important;
  }

  body.source-home :is(
    .home-goal-router__unknown,
    .home-proof-band__copy > div
  ) > a {
    min-height: var(--ibt-target-min, 44px);
    display: inline-flex;
    align-items: center;
  }

  body.source-home :is(
    .ibtx-toolbar-device,
    .quick-dock a,
    .quick-dock button
  ) {
    min-height: var(--ibt-target-min, 44px);
  }
}

/* --------------------------------------------------------------------------
   MOBILE CINEMATIC JOURNEY
   Mobile keeps the real canvas-driven five-beat story instead of replacing it
   with a static card. The stage is sticky, scroll distance is intentionally
   shorter than desktop, copy stays inside a readable safe zone, and the final
   CTA clears the mobile quick dock / safe-area inset.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey.cinematic-story {
    position: relative !important;
    height: clamp(2100px, 310svh, 2800px) !important;
    min-height: 2100px !important;
    padding: 0 !important;
    isolation: isolate;
    background: #050817 !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__stage {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    contain: paint;
    background: #050817 !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey #cinematicCanvas {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    z-index: 0;
  }

  /* The native engine starts the first visual beat immediately on mobile. The
     long desktop intro is removed so the user sees motion and meaning without
     waiting through an empty scroll segment. */
  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__intro {
    display: none !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__top {
    display: flex !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right: 18px !important;
    left: 18px !important;
    z-index: 4 !important;
    opacity: .82;
    pointer-events: none;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__index {
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__captions {
    display: block !important;
    position: absolute !important;
    right: auto !important;
    left: 50% !important;
    bottom: max(146px, 17svh) !important;
    width: min(calc(100vw - 52px), 380px) !important;
    min-height: 178px !important;
    max-width: 380px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    pointer-events: none;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-cap {
    width: 100% !important;
    padding: 18px 18px 17px !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 18px !important;
    background: rgba(5, 10, 27, .76) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-cap .cap-no {
    display: inline-flex;
    margin-bottom: 8px !important;
    color: #82eaf8 !important;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: .08em;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-cap h3 {
    margin: 0 0 7px !important;
    font-size: clamp(25px, 7.2vw, 31px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-cap p {
    margin: 0 !important;
    max-width: 36ch !important;
    color: #b5c0d6 !important;
    font-size: clamp(13px, 3.55vw, 15px) !important;
    line-height: 1.78 !important;
  }

  /* Keep progress visible but peripheral; it supports orientation without
     competing with the scene or requiring tiny tap targets. */
  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__rail {
    display: block !important;
    position: absolute !important;
    top: 23svh !important;
    right: auto !important;
    bottom: 27svh !important;
    left: auto !important;
    inset-inline-end: 10px !important;
    width: 22px !important;
    z-index: 4 !important;
    opacity: .72;
    pointer-events: none;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__steps {
    font-size: 8px !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__cue {
    display: flex !important;
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 48px) !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 4 !important;
    gap: 7px !important;
    color: rgba(220, 228, 244, .68) !important;
    font-size: 10px !important;
    transform: none !important;
    pointer-events: none;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__cue i:last-child {
    display: none !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__final-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 78px)) !important;
    width: min(calc(100vw - 72px), 340px) !important;
    min-height: 48px !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 13px !important;
    background: rgba(8, 15, 36, .88) !important;
    color: #fff !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .3) !important;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    font-size: 13px !important;
    font-weight: 900;
    text-align: center;
    z-index: 6 !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__fallback {
    display: none !important;
  }

  /* Accessibility / resilience: reduced-motion or an unavailable canvas gets a
     complete static summary with the same next action, never an empty scene. */
  html.no-story-motion body.source-home[data-page="index"] #journey.cinematic-story {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html.no-story-motion body.source-home[data-page="index"] #journey .cinematic-story__stage {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.no-story-motion body.source-home[data-page="index"] #journey :is(
    #cinematicCanvas,
    .cinematic-story__intro,
    .cinematic-story__captions,
    .cinematic-story__rail,
    .cinematic-story__cue,
    .cinematic-story__final-action
  ) {
    display: none !important;
  }

  html.no-story-motion body.source-home[data-page="index"] #journey .cinematic-story__fallback {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    min-height: 390px !important;
    padding: 64px 20px !important;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 76% 22%, rgba(79, 125, 243, .12), transparent 34%),
      #050817 !important;
  }

  html.no-story-motion body.source-home[data-page="index"] #journey .cinematic-story__fallback > div {
    width: min(100%, 420px);
  }
}

@media (max-width: 430px) {
  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey.cinematic-story {
    height: clamp(2200px, 330svh, 2850px) !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__captions {
    bottom: max(150px, 18svh) !important;
    width: calc(100vw - 44px) !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-cap {
    padding: 17px 16px 16px !important;
    border-radius: 16px !important;
  }

  html.cinematic-ready:not(.no-story-motion) body.source-home[data-page="index"] #journey .cinematic-story__rail {
    inset-inline-end: 6px !important;
    opacity: .56;
  }
}