/* ============================================================
       ROOT — KADENCE CSS VARIABLES
    ============================================================ */
:root {
  --global-palette1: #f54a48;
  --global-palette2: #7436bb;
  --global-palette3: #ffffff;
  --global-palette4: #461f72;
  --global-palette5: #231f20;
  --global-palette6: #767676;
  --global-palette7: #edf2f7;
  --global-palette8: #f7fafc;
  --global-palette9: #140921;
  --global-palette10: #fa982f;
  --global-palette11: #767676;
  --global-palette11: red;
  --global-palette15: #f5a524;

  --global-palette-btn-bg: linear-gradient(
    260deg,
    var(--global-palette10) 57%,
    var(--global-palette2) 100%
  );
  --global-palette-btn-bg-hover: linear-gradient(
    260deg,
    var(--global-palette2) 0%,
    var(--global-palette10) 51%
  );

  --global-body-font-family: "Raleway", sans-serif;
  --global-heading-font-family: "Raleway", sans-serif;
  --global-button-font-family: "Barlow", sans-serif;

  --global-content-width: 1290px;
  --global-content-edge-padding: 1.5rem;

  /* Fluid type */
  --fs-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
  --fs-md: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  --fs-xxl: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  /* --fs-hero: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); */
  --fs-hero: clamp(2rem, 1.5rem + 2.5vw, 3rem);

  /* Spacing */
  --sp-xs: 1rem;
  --sp-sm: 1.5rem;
  --sp-md: 2rem;
  --sp-lg: 3rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 8rem;

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 35px;

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.28);
  --transition: 0.3s ease;
}

/* ============================================================
       ██████╗  █████╗  ██████╗██╗  ██╗ ██████╗ ██████╗  ██████╗
       ██╔══██╗██╔══██╗██╔════╝██║ ██╔╝██╔════╝ ██╔══██╗██╔═══██╗
       ██████╔╝███████║██║     █████╔╝ ██║  ███╗██████╔╝██║   ██║
       ██╔══██╗██╔══██║██║     ██╔═██╗ ██║   ██║██╔══██╗██║   ██║
       ██████╔╝██║  ██║╚██████╗██║  ██╗╚██████╔╝██║  ██║╚██████╔╝
       ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝ ╚═════╝

       UNIVERSAL SECTION BACKGROUND SYSTEM
       ─────────────────────────────────────────────────────────────
       Every section uses the same four-layer stack:

         Layer 1 — .sec-bg__img      (background photo / image)
         Layer 2 — .sec-bg__video    (background video)
         Layer 3 — .sec-bg__pattern  (texture / pattern overlay image)
         Layer 4 — .sec-bg__overlay  (gradient / colour overlay div)

       Usage rules:
       • Include all four elements in the HTML.
       • Enable/disable each layer by toggling the CSS variable on the
         section wrapper (e.g. `--sec-img-opacity: 0` to hide an image).
       • Per-section variables live in the SECTION BACKGROUND VARIABLES
         block below — change only those vars; never touch this core block.

       HTML pattern for every section:
       ────────────────────────────────
         <div class="sec-bg">
           <img   src="..." alt="..." class="sec-bg__img"     fetchpriority="low" loading="lazy" />
           <video class="sec-bg__video" autoplay muted loop playsinline>
             <source src="..." type="video/mp4">
           </video>
           <img   src="..." alt="pattern" class="sec-bg__pattern" loading="lazy" />
           <div   class="sec-bg__overlay"></div>
         </div>

       For the HERO only: use fetchpriority="high" on the img (no lazy).
    ============================================================ */

/* ── Core wrapper ── */
.sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Layer 1: Background photo ── */
.sec-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  /* Control per-section via --sec-img-opacity on the section wrapper */
  opacity: var(--sec-img-opacity, 0.3);
  /* Set to 0 to disable: --sec-img-opacity: 0 */
}

/* ── Layer 2: Background video ── */
.sec-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  opacity: var(--sec-video-opacity, 0.2);
  /* Set to 0 to disable: --sec-video-opacity: 0 */
}

/* ── Layer 3: Pattern / texture overlay image ── */
.sec-bg__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 3;
  opacity: var(--sec-pattern-opacity, 0.5);
  mix-blend-mode: var(--sec-pattern-blend, overlay);
  /* Set to 0 to disable: --sec-pattern-opacity: 0 */
}

/* ── Layer 4: Gradient / colour overlay div ── */
.sec-bg__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: var(--sec-overlay-opacity, 0.6);
  mix-blend-mode: var(--sec-overlay-blend, normal);
  background: var(
    --sec-overlay-bg,
    linear-gradient(
      160deg,
      rgba(20, 9, 33, 0.92) 0%,
      rgba(71, 17, 51, 0.85) 100%
    )
  );
}
/* ============================================================
       SECTION BACKGROUND VARIABLES
       ─────────────────────────────────────────────────────────────
       Override these per section.
       Set any opacity to 0 to effectively disable that layer.
       Set --sec-overlay-bg to a transparent value to disable overlay.
    ============================================================ */

/* ── 01. HERO ── */
.hero {
  padding-top: 100px;
  --sec-img-opacity: 0.5;
  --sec-video-opacity: 1;
  --sec-pattern-opacity: 1;
  --sec-pattern-blend: overlay;
  --sec-overlay-bg: linear-gradient(
    160deg,
    rgba(20, 9, 33, 0.92) 0%,
    rgba(71, 17, 51, 0.85) 100%
  );
  --sec-overlay-opacity: 0.8;
  --sec-overlay-blend: normal;
}

/* ── 02. SERVICES ── */
.services {
  --sec-img-opacity: 1;
  /* disabled — set > 0 to enable */
  --sec-video-opacity: 1;
  --sec-pattern-opacity: 1;
  --sec-overlay-bg: linear-gradient(
    160deg,
    rgba(20, 9, 33, 0.92) 0%,
    rgba(71, 17, 51, 0.85) 100%
  );
  --sec-overlay-opacity: 0.8;
  --sec-overlay-blend: overlay;
}

/* ── 03. USP (Why Choose Us) ── */
.usp {
  --sec-img-opacity: 0.15;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: rgba(20, 9, 33, 0.88);
}

/* ── 04. PROCESS ── */
.process {
  --sec-img-opacity: 1;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: rgba(20, 9, 33, 0.88);
}

/* ── 05. LOGOS ── */
.logos {
  --sec-img-opacity: 0;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: transparent;
}

/* ── 06. RESULTS ── */
.results {
  --sec-img-opacity: 0;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: transparent;
}

/* ── 07. TESTIMONIALS ── */
.testimonials {
  --sec-img-opacity: 0;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: linear-gradient(
    180deg,
    rgb(20, 9, 33) 0%,
    rgb(71, 17, 51) 60%,
    rgb(20, 9, 33) 100%
  );
}

/* ── 08. FAQ ── */
.faq {
  --sec-img-opacity: 0.15;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: rgba(20, 9, 33, 0.88);
}

/* ── 09. FINAL CTA ── */
.cta-final {
  --sec-img-opacity: 0;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(116, 54, 187, 0.25) 0%,
    transparent 70%
  );
}

/* ── 10. CONTACT FORM ── */
.contact {
  --sec-img-opacity: 0;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: transparent;
}

/* ── CONTACT BAR ── */
.contact-bar {
  --sec-img-opacity: 0;
  --sec-video-opacity: 0;
  --sec-pattern-opacity: 0;
  --sec-overlay-bg: transparent;
}

/* ============================================================
       RESET & BASE
    ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ── Custom section element (replaces native <section> to avoid style conflicts) ── */
.kbm-section {
  display: block;
  padding: 0;
}

body {
  font-family: var(--global-body-font-family);
  font-size: 17px;
  line-height: 1.6;
  color: var(--global-palette3);
  background: var(--global-palette9);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
       UTILITIES
    ============================================================ */
.kbm-container {
  max-width: var(--global-content-width);
  margin-inline: auto;
  padding-inline: var(--global-content-edge-padding);
}

[data-observe] {
  transition: none !important;
}

/* Every section that uses a background needs position:relative
       so .sec-bg (position:absolute) is contained correctly */
.hero,
.services,
.usp,
.process,
.logos,
.results,
.testimonials,
.faq,
.cta-final,
.contact,
.contact-bar {
  position: relative;
}

/* Ensure section content sits above .sec-bg layers */
.hero__content,
.services > .kbm-container,
.usp > .kbm-container,
.process > .kbm-container,
.logos > .kbm-container,
.results > .kbm-container,
.testimonials > .kbm-container,
.faq > .kbm-container,
.cta-final > .kbm-container,
.contact > .kbm-container,
.contact-bar > .kbm-container {
  position: relative;
  z-index: 5;
}

/* ── Section label (orange line + text) ── */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.section-label__line {
  display: block;
  width: 70px;
  height: 3px;
  background: var(--global-palette10);
  border-radius: 2px;
  flex-shrink: 0;
}

.section-label__text {
  font-family: var(--global-body-font-family);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--global-palette3);
  letter-spacing: 0.02em;
}

.section-heading {
  font-family: var(--global-heading-font-family);
  font-weight: 800;
  font-size: var(--fs-xxl);
  line-height: 1.25;
  color: var(--global-palette3);
}

.section-heading .accent {
  background: var(--global-palette-btn-bg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subheading {
  font-family: "Barlow", sans-serif;
  font-size: var(--fs-md);
  color: var(--global-palette7);
  line-height: 1.65;
  margin-top: 0.75rem;
  max-width: 600px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 36px;
  border-radius: 30px;
  font-family: var(--global-button-font-family);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition:
    box-shadow var(--transition),
    opacity var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--global-palette-btn-bg-hover);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: -1;
}

.btn:hover::before {
  opacity: 1;
}

.btn:hover {
  box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.3);
}

.btn--primary {
  background: var(--global-palette-btn-bg);
  color: var(--global-palette3);
}

.btn--outline {
  background: transparent;
  color: var(--global-palette3);
  border: 1px solid var(--global-palette1);
}

.btn--outline::before {
  background: var(--global-palette-btn-bg);
}

.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.kbm-section button:not(.results__play-btn):focus,
.kbm-section button:not(.results__play-btn):focus-visible,
.kbm-section button:not(.results__play-btn):active,
.kbm-section button:not(.results__play-btn):hover {
  outline: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
}