/* Style Setup */

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
/* IOS Fix */
html,
body {
  overscroll-behavior: none;
  font-synthesis: none;
}
/* bricolage-grotesque-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200;
  src:
    url("/assets/fonts/bricolage-grotesque-v9-latin-200.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("/assets/fonts/bricolage-grotesque-v9-latin-200.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* bricolage-grotesque-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400;
  src:
    url("/assets/fonts/bricolage-grotesque-v9-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("/assets/fonts/bricolage-grotesque-v9-latin-regular.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* bricolage-grotesque-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  src:
    url("/assets/fonts/bricolage-grotesque-v9-latin-800.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("/assets/fonts/bricolage-grotesque-v9-latin-800.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

:root {
  /* Color Scheme */
  --primary-color: #2474ff;
  --gradient: linear-gradient(90deg, #00f 0%, #3535e2 87.98%);
  --half-grad: linear-gradient(1deg, #00f 1.01%, #fff 66.32%);
  --dark: #0e0e0e;
  --light: #ffffff;

  /* Font Families */
  --ui:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-family-heading: "Bricolage Grotesque", var(--ui);
  --font-family-body: var(--ui); /* or just var(--ui) for faster paint */

  /* Heading Font Sizes */
  --font-size-h1: 5.4rem; /* 54px */
  --font-size-h2: 4.2rem; /* 48px */
  --font-size-h3: 3.6rem; /* 36px */
  --font-size-h4: 3.2rem; /* 32px */
  --font-size-h5: 2.4rem; /* 24px */
  --font-size-h6: 2rem; /* 20px */

  /* Body Font Sizes */
  --font-size-body-xl: 2rem; /* 20px */
  --font-size-body-lg: 1.8rem; /* 18px */
  --font-size-body-md: 1.6rem; /* 16px */
  --font-size-body-sm: 1.4rem; /* 14px */
  --font-size-body-xs: 1.2rem; /* 12px */

  /* Line Heights */
  --font-line-height-xl: 3.2rem; /* 32px */
  --font-line-height-lg: 2.88rem; /* 28.8px */
  --font-line-height-md: 2.4rem; /* 24px */
  --font-line-height-sm: 2.1rem; /* 21px */
  --font-line-height-xs: 1.44rem; /* 14.4px */

  /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Button */
  --btn-padding-lg: 1.5rem 3.2rem;
  --btn-padding-md: 1.2rem 1.6rem;
  --btn-padding-sm: 0.8rem 2.4rem;
  --btn-gap: 0.8rem;
  --btn-radius: 99rem;
  --btn-font-size-lg: var(--font-size-body-lg);
  --btn-font-size-sm: var(--font-size-body-sm);
  --btn-line-height: 1.6;
  --btn-color-bg: var(--gradient);
  --btn-color-text: var(--light);
  --btn-outline-border: 2px solid var(--primary-color);
}
body {
  background-color: #252525;
}
a,
p {
  font-family: var(--ui);
  font-size: var(--font-size-body-lg);
  line-height: var(--font-line-height-lg);
  color: var(--light);
  transition: 0.15s all;
}
a {
  text-decoration-line: none;
  /* &:active {
    color: var(--primary-color);
  }
  &:link {
    color: var(--primary-color);
  } */
  &:hover {
    opacity: 0.6;
  }
}
/* For dynamically active on section scrollvoer */
nav a {
  transition:
    color 0.15s ease-in-out,
    opacity 0.15s ease-in-out;
}
nav a.active {
  color: var(--primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--light);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}
h5 {
  font-size: var(--font-size-h5);
}
h6 {
  font-size: var(--font-size-h6);
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--btn-line-height);
  color: var(--btn-color-text);
  background: linear-gradient(270deg, #3535e2 0%, #00f 87.98%);
  filter: brightness(1);
  transition:
    background 0.15s ease-in-out,
    filter 0.15s ease-in-out;
}

.btn--large {
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-size-lg);
  gap: var(--btn-gap);
}

.btn--small {
  padding: var(--btn-padding-sm);
  /* font-size: var(--btn-font-size-sm); */
}
.btn--medium {
  padding: var(--btn-padding-md);
}
.btn--medium:has(img) {
  gap: 1.2rem;
}

.btn--icon .btn__icon {
  width: 2.4rem;
  height: 2.4rem;
}
.nav-btn__wrapper {
  display: flex;
  gap: 0.8rem;
  flex-shrink: 0;
  flex-grow: 0;
  align-items: center;
}
.btn--outline {
  background: rgba(255, 255, 255, 0.2);
  color: var(rgba(255, 255, 255, 0.8));
  /* border: var(--btn-outline-border); */
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.btn--outline--dark {
  background: rgba(0, 0, 0, 0.8);
  color: var(--light);
}

.btn--outline--dark:hover {
  background: rgba(0, 0, 0, 1) !important;
}

.btn:hover {
  background: linear-gradient(90deg, #2929ad 12.02%, #00c 100%);
  filter: brightness(0.9);
}

.btn-demo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 0;
}

.highlighted-heading {
  color: var(--primary-color);
}

/* ---- Navigation Bar ---- */
header {
  display: flex;
  padding: 1.7rem 13.5rem;
  background-color: #000102;
  transition: padding 0.35s ease;
}
/* ------------- base (page top) ------------- */
#site-header {
  position: fixed; /* sticks to top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 1.7rem 2.5rem; /* your current spacing */
  background: transparent; /* see-through at the hero */
  transition:
    padding 0.35s ease,
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    border-bottom-color 0.35s ease;
}

/* ------------- scrolled state ------------- */
#site-header.nav--scrolled .nav__container {
  padding: 1.2rem 3.2rem;
  border-radius: 10rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(0.6rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 2rem rgba(0, 0, 0, 0.35);
  will-change: backdrop-filter, background-color; /* <--- Add this line */
  transform: translateZ(0); /* Hack to force hardware acceleration */
}

.nav__container {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  transition:
    padding 0.35s ease,
    background 0.35s ease,
    border-radius 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
  .nav__container-img a:hover {
    opacity: unset;
  }
}
.nav__container-links {
  display: flex;
  width: fit-content;
  gap: 2.4rem;
  a {
    font-size: var(--font-size-body-xl);
  }
}

main {
  background-color: #000;
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */

/* 1. Force GPU Layering for Animations 
   This stops Firefox from repainting the logo strips on every frame. */
.hero__partners-strip-track,
.industries__services-container,
.before-after__mockups-container {
  will-change: transform;
  transform: translate3d(0, 0, 0); /* Forces hardware acceleration */
  backface-visibility: hidden; /* clean up edges during animation */
}

/* 2. Fix Firefox Header + Carousel Tag Lag
   Firefox's 'backdrop-filter' is CPU-heavy. We disable it for Firefox
   and use solid backgrounds instead. */
@-moz-document url-prefix() {
  #site-header.nav--scrolled .nav__container {
    backdrop-filter: none !important;
    background-color: rgba(14, 14, 14, 0.98) !important;
    transition: background-color 0.3s ease;
  }

  /* backdrop-filter on 3 tags × 9 cards = 27 blurred layers simultaneously. */
  .casestudy__tag {
    backdrop-filter: none !important;
    background: rgba(36, 116, 255, 0.95) !important;
  }

  /* THE PRIMARY SCROLL CULPRIT IN FIREFOX:
     filter: blur(200px) on a 1629×1164px pseudo-element forces WebRender to
     create a large offscreen surface. Even with isolation/overflow:hidden on
     the parent, Firefox's compositor tree treats this surface as a document-level
     dependency — meaning every scroll frame has to composite THROUGH this surface
     for the entire page, not just the hero. Chrome handles this in a separate
     compositor tile; Firefox does not.
     Fix: remove the blur entirely in Firefox. We replace it with a plain
     radial-gradient at low opacity — same colour mood, zero compositor cost. */
  .hero__section::after {
    filter: none !important;
    background: radial-gradient(
      ellipse at 50% 100%,
      rgba(38, 46, 196, 0.55) 0%,
      rgba(98, 50, 255, 0.25) 45%,
      transparent 75%
    ) !important;
    opacity: 0.8;
  }
  /* Add BELOW your existing hero::after rule */
  @media screen and (max-width: 960px) {
    .hero__section::after {
      /* Same fix you already did for Firefox — apply it to all mobile browsers */
      filter: none !important;
      background: radial-gradient(
        ellipse at 50% 100%,
        rgba(38, 46, 196, 0.55) 0%,
        rgba(98, 50, 255, 0.25) 45%,
        transparent 75%
      ) !important;
      /* Fix positioning to eliminate CLS */
      width: 100% !important;
      height: 100% !important;
      border-radius: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
    }
  }
  /* mask-image in Firefox has no GPU path — it forces the entire carousel
     wrapper and its children to be rasterized in software on every scroll frame.
     Removing it costs nothing visually since the fade effect is decorative only. */
  .casestudies__carousel-wrapper {
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

/* ---- Hero Section ---- */

.hero__section {
  padding: 19rem 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.2rem;
  position: relative;
  overflow: hidden;
}
.hero__section::after {
  content: "";
  background: linear-gradient(
    125deg,
    #262ec4 -21.19%,
    #1c2dc6 4.21%,
    #2666c5 20.69%,
    #313131 35.84%,
    #6232ff 65.68%
  );
  position: absolute;
  width: 1629px;
  height: 1164px;
  border-radius: 1629px;
  filter: blur(200px);
  z-index: 0;
  bottom: -800px;
}
.hero__detail-container {
  padding: 0rem 6.4rem;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  z-index: 1;
  gap: 1.2rem;
  h1 {
    font-weight: 400;
    max-width: 880px;
    text-align: center;
    text-wrap: balance;
    font-size: 72px;
  }
  p {
    text-align: center;
    max-width: 730px;
  }
  button {
    margin-top: 1.6rem;
  }
}
.hero__proof-img-container {
  display: flex;
  width: max-content;
  height: 3.4rem;
  img {
    width: 100%;
    height: 100%;
  }
}
/* ---- Stats Section ---- */
.stats__section {
  background: #0a0a0a;
  padding: 4rem 13.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2rem 4.8rem;
  position: relative;
}

/* Vertical divider between items */
.stats__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 55%;
  background: rgba(255, 255, 255, 0.12);
}

.stats__number {
  font-size: var(--font-size-h1); /* 54px — matches Figma prominence */
  font-weight: 700;
  color: var(--light);
  line-height: 1;
}

.stats__label {
  font-size: var(--font-size-body-sm);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}
.optimize__section {
  display: flex;
  flex-direction: column;
  padding: 6.4rem;
  gap: 3.2rem;
  background: linear-gradient(0deg, #0e0e0e 0%, #111 100%);
  align-items: center;
  h1:first-child {
    width: 100rem;
    text-align: center;
    color: var(--light);
  }
}

.optimize__blocks-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.6rem;
  .optimize__block {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 430rem;
    max-height: 430rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 2rem;
    gap: 2.4rem;
    .optimize__block-img__container {
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: 3rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .optimize__block-content__container {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      min-height: 15.12rem;
      h5,
      p {
        color: var(--light);
      }
    }
  }
  .optimize__block-cta {
    display: flex;
    flex-direction: column;
    background: linear-gradient(
      138deg,
      #393939 0%,
      #151515 49.26%,
      #151515 100%
    );
    justify-content: center;
    align-items: center;
    padding: 2rem 6.4rem;
    gap: 1.6rem;
    border-radius: 2rem;
    .optimize__block-img__container {
      width: 8rem;
      height: 8rem;
      border-radius: 100rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .optimize__block-content__container {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      text-align: center;
      h4,
      p {
        color: var(--light);
      }
      button {
        margin-top: 0.4rem;
      }
    }
  }
}

/* ---- Roadmap Section ---- */
.roadmap__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rem 6.4rem;
  gap: 5.6rem;
  background: linear-gradient(0deg, #0e0e0e 0%, #111 100%);
}

.roadmap__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  max-width: 72rem;
  h1 {
    text-align: center;
  }
  p {
    color: rgba(255, 255, 255, 0.55);
  }
}

.roadmap__timeline {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  max-width: 120rem;
}

/* Row of chips with connecting line running through them */
.roadmap__chips-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 2rem;
}

/* The horizontal connector line */
.roadmap__chips-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(36, 116, 255, 0.15) 0%,
    rgba(36, 116, 255, 0.6) 20%,
    rgba(36, 116, 255, 0.6) 80%,
    rgba(36, 116, 255, 0.15) 100%
  );
  transform: translateY(-50%);
  z-index: 0;
}

.roadmap__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.8rem;
  background: linear-gradient(270deg, #3535e2 0%, #00f 87.98%);
  border-radius: 99rem;
  position: relative;
  z-index: 1;
  span {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    color: var(--light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  svg {
    flex-shrink: 0;
  }
}

/* Grid of cards below the chips */
.roadmap__cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.roadmap__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.6rem;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
  h5 {
    color: var(--light);
    font-size: var(--font-size-h6);
    line-height: 1.35;
  }
  p {
    font-size: var(--font-size-body-sm);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
  }
}

.roadmap__card:hover {
  border-color: rgba(36, 116, 255, 0.35);
  background: rgba(36, 116, 255, 0.05);
}

/* Videos Section */
.videos__section {
  display: flex;
  flex-direction: column;
  padding: 6.4rem 13.5rem;
  gap: 4.8rem;
  background: linear-gradient(0deg, #0e0e0e 0%, #111 100%);
}
.videos__content-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  h1 {
    width: 80rem;
  }
  p {
    width: 81.4rem;
    color: rgba(255, 255, 255, 0.6);
  }
}

/* Videos Section */
.videos__videos-slider {
  display: flex;
  height: fit-content;
  gap: 3.2rem;
  padding: 0rem 4rem;
  justify-content: center;
  align-items: center;
  /* --- YOUTUBE FACADE FIXES --- */

  .videos__video-col {
    /* Lock dimensions so Facade doesn't collapse */
    position: relative;
    width: 32.8rem;
    height: 48rem;
    flex: 0 0 32.8rem; /* CRITICAL: Don't let flexbox shrink this! */
    background-color: #000;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
  }

  /* Facade container fills the parent exactly */
  .video-facade {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* Force the thumbnail to cover the vertical area (like Shorts) */
  .video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers 32.8rem x 48rem without squashing */
    opacity: 0.8;
    transition: opacity 0.3s;
  }

  .video-facade:hover img {
    opacity: 1;
  }

  /* Style the Play Button */
  .play-btn {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s;
    padding: 0; /* reset default button padding */
  }

  .video-facade:hover .play-btn {
    transform: scale(1.1);
  }

  .play-btn-bg {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill 0.2s;
  }

  .video-facade:hover .play-btn-bg {
    fill: #f00; /* YouTube Red on hover */
    fill-opacity: 1;
  }

  /* When iframe loads, it MUST fill the space */
  .videos__video-col iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    object-fit: cover; /* Try to cover, though iframes are tricky */
  }

  /* --- Mobile Specific Adjustment --- */
  @media screen and (max-width: 768px) {
    .videos__video-col {
      width: 100%; /* Full width on mobile */
      height: 50vh; /* Reasonable height on mobile */
      flex: 0 0 auto;
    }
  }
}
/* ---- Case Studies Section ---- */
.casestudies__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rem 0;
  gap: 4.8rem;
  background: #0e0e0e;
  overflow: hidden;
}

.casestudies__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  padding: 0 3.2rem;
  max-width: 80rem;
  h1 {
    text-align: center;
  }
  p {
    color: rgba(255, 255, 255, 0.55);
    max-width: 68rem;
  }
}

/* Carousel */
.casestudies__carousel-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Fade edges for depth */
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 8%,
    black 18%,
    black 82%,
    rgba(0, 0, 0, 0.3) 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 8%,
    black 18%,
    black 82%,
    rgba(0, 0, 0, 0.3) 92%,
    transparent 100%
  );
}

.casestudies__carousel-track {
  display: flex;
  gap: 2.4rem;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* Align to left initially; JS overrides with centering */
  padding: 1.2rem 0 2rem;
}

/* Individual case study card */
.casestudy__card {
  flex: 0 0 44rem;
  display: flex;
  flex-direction: column;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 2rem;
  overflow: hidden;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  opacity: 0.45;
  transform: scale(0.96);
  cursor: pointer;
}

/* Active (center) card */
.casestudy__card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(36, 116, 255, 0.3);
  cursor: default;
}

/* Card image area */
.casestudy__card-img {
  position: relative;
  width: 100%;
  height: 26rem;
  overflow: hidden;
  background: #1a1a1a;
  flex-shrink: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
}

.casestudy__card.is-active .casestudy__card-img img:hover {
  transform: scale(1.03);
}

/* Gradient overlay for tags legibility */
.casestudy__card-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  pointer-events: none;
}

/* Metric tags overlaid at bottom of image */
.casestudy__card-tags {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  right: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  z-index: 1;
}

.casestudy__tag {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(36, 116, 255, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 99rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  font-weight: 500;
  color: var(--light);
  line-height: 1.6;
  white-space: nowrap;
}

/* Card content */
.casestudy__card-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 2.4rem 2.4rem;
  flex: 1;
  h3 {
    font-size: var(--font-size-h6);
    font-weight: 700;
    color: var(--light);
    line-height: 1.35;
  }
  p {
    font-size: var(--font-size-body-sm);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 1.1rem 2.4rem;
    font-size: var(--font-size-body-sm);
  }
}

/* Dots */
.casestudies__dots {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

.casestudy__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 99rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.25s ease,
    width 0.25s ease;
  flex-shrink: 0;
}

.casestudy__dot.is-active {
  background: var(--primary-color);
  width: 2.4rem;
}

/* Work Section */
.work__section {
  display: flex;
  flex-direction: column;
  padding: 6.4rem 5rem;
  gap: 6.4rem;
  background: #0e0e0e;
  justify-content: center;
  align-items: center;
}
.work__content-container {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  width: 84.6rem;
  justify-content: center;
  align-items: center;
  .work__text-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    h1 {
      width: 64rem;
    }
    p {
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .btn {
    width: 38.1rem;
  }
}
.work__showcase-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.6rem 1.6rem;
  width: 100%;
}
.work__showcase-block {
  display: flex;
  flex-direction: column;
  height: 54rem;
  overflow: hidden;
  gap: 0.8rem;
}
.work__showcase-img-container {
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 80%;
  position: relative;
  overflow: hidden;
  img {
    transition: 8s object-position ease-in;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: top;
  }
}
.work__showcase-img-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.4s infinite;
}
.work__showcase-img-container.loaded::before {
  display: none;
}
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.work__showcase-img-container:hover {
  img {
    object-position: bottom;
  }
}
.work__showcase-content-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: 30%;
  p {
    font-size: var(--font-size-body-md);
    line-height: var(--font-line-height-sm);
  }
  .work__showcase-content-head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    button {
      /* display: none; */
      padding: var(--btn-padding-sm);
      background-color: unset;
      border: 0.05rem solid rgba(255, 255, 255, 255.6);
    }
  }
  /* padding: 0.8rem; */
}
/* Package section */
.package__section {
  display: flex;
  flex-direction: column;
  padding: 6.4rem 5rem;
  gap: 6.4rem;
  background: #0e0e0e;
  justify-content: center;
  align-items: center;
  position: relative;
  div {
    z-index: 1;
  }
  .package__text-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    h1 {
      width: 90rem;
    }
    p {
      color: rgba(255, 255, 255, 0.6);
      width: 83rem;
    }
  }
}
.package__section::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98.6vw;
  height: 50rem;
  background: radial-gradient(
    81.12% 50% at 50% 50%,
    rgba(27, 86, 189, 0.4) 0%,
    rgba(14, 14, 14, 0) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.package__pricing-cards-container {
  display: flex;
  width: 100%;
  gap: 1.6rem;
  align-items: center;
  justify-content: center;
}
.package__pricing-card {
  display: flex;
  /* max-width: 39rem; */
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.1rem 3.2rem;
  background: #000;
  border: 1px solid var(--gradient);
  border-radius: 2rem;
  gap: 1.8rem;
  position: relative;
  overflow: hidden;
  .package__pricing-header__container {
    display: flex;
    gap: 0.8rem;
  }
  .package__pricing-header__img-container {
    width: 4rem;
    height: 4rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .package__pricing-header__content-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    .package__pricing-head-container {
      display: flex;
      gap: 0.8rem;
      p:first-child {
        font-size: var(--font-size-body-md);
        line-height: var(--font-line-height-md);
        font-weight: bold;
      }
      .package__pricing-tag-container {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--primary-color);
        display: flex;
        color: white;
        padding: 4px 8px;
        text-align: center;
        border-radius: 5px;
        p {
          font-size: var(--font-size-body-xs);
          line-height: var(--font-line-height-xs);
        }
      }
    }
    .package__pricing-desc-container p {
      font-size: var(--font-size-body-md);
      line-height: var(--font-line-height-md);
      font-weight: var(--font-weight-regular);
    }
  }
  .package__pricing-price__container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    p:first-child {
      font-size: var(--font-size-body-xs);
      line-height: var(--font-line-height-xs);
      color: rgba(255, 255, 255, 0.8);
    }
    .package__pricing-mention-container {
      display: flex;
      gap: 0.8rem;
      align-items: center;
      .package__pricing-discount--style {
        text-decoration-line: line-through;
        color: rgba(255, 255, 255, 0.6);
        font-size: var(--font-size-body-lg);
        line-height: var(--font-line-height-lg);
      }
    }
  }
  .package__pricing-detail {
    font-size: var(--font-size-body-sm);
    line-height: var(--font-line-height-sm);
  }

  h2 {
    font-weight: 300;
  }
  button.btn.btn--large {
    margin: 0.8rem 0rem;
  }
}
.package__pricing-card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0.2rem; /* beam thickness */
  height: 0; /* start collapsed */
  background: linear-gradient(
    to top,
    rgba(36, 116, 255, 0) 0%,
    rgba(36, 116, 255, 0.8) 50%,
    rgba(36, 116, 255, 0) 100%
  );
  transition: height 0.8s ease-in-out; /* animate the height */
  z-index: 2;
}
.package__pricing-card:hover::before {
  height: 100%;
}
.package__pricing-card:hover {
  transform: scale(1.02);
}
.package__service-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  .package__service-list-block {
    display: flex;
    gap: 1rem;
    .package__service-icon-container {
      padding-top: 0.7rem;
      width: 1.4rem;
      height: 2.1rem;
    }
    p {
      color: rgba(255, 255, 255, 0.6);
      font-weight: 300;
      font-size: var(--font-size-body-lg);
    }
  }
}
/* .package__pricing__hourly-container {
  display: flex;
  gap: 1rem;
  justify-content: start;
  align-items: center;
  h2 {
    display: inline-block;
  }
  h5 {
    font-weight: 300;
  }
} */
.package__discount {
  max-width: 48rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: underline;
  }
}

/* FAQ Section */
.faq__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0e0e0e;
  gap: 4.8rem;
  padding: 6.4rem 2.4rem; /* Reduced horizontal padding for mobile safety */
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
  max-width: 80rem;
}

.faq__description {
  font-size: var(--font-size-body-md);
  line-height: var(--font-line-height-md);
  color: rgba(255, 255, 255, 0.6);
}

/* Accordion Core */
.accordion {
  width: 100%;
  max-width: 86rem;
  display: flex;
  flex-direction: column;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* The Flexbox Button */
.accordion button {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes title left, icon right */
  gap: 2rem;
  width: 100%;
  padding: 2.4rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s ease;
}

.accordion-title {
  flex: 1; /* Takes up remaining space */
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-body-md);
  font-family: var(--font-family-body);
  transition: color 0.3s ease;
}

/* Modern Icon using Flex */
.accordion__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0; /* Prevents icon from squishing */
  position: relative;
}

/* Icon Lines using CSS variables for clean logic */
.accordion__icon-container::before,
.accordion__icon-container::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform 0.3s ease;
}

.accordion__icon-container::before {
  width: 10px;
  height: 2px;
} /* Horizontal */
.accordion__icon-container::after {
  width: 2px;
  height: 10px;
} /* Vertical */

/* States */
.accordion button:hover .accordion-title {
  color: #fff;
}
.accordion button[aria-expanded="false"] {
  color: rgba(255, 255, 255, 0.8);
}
.accordion button[aria-expanded="true"] {
  color: var(--primary-color);
}

.accordion button[aria-expanded="true"] .accordion-title {
  color: var(--primary-color);
}

/* Rotate the vertical line to make it a minus sign */
.accordion button[aria-expanded="true"] .accordion__icon-container::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Content Area */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion button[aria-expanded="true"] + .accordion-content {
  max-height: 1000px; /* Large enough for content */
  opacity: 1;
  padding-bottom: 2.4rem;
}

/* Inner Typography */
.accordion-content p,
.faq-list li {
  font-size: var(--font-size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-family-body);
}

.faq-list {
  list-style: none;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.faq-list li {
  display: flex;
  gap: 1rem;
}

.faq-list li::before {
  content: "→";
  color: var(--primary-color);
  font-weight: bold;
}
/* Call Section */
.call__section {
  display: flex;
  flex-direction: column;
  padding: 6.4rem 0rem;
  background: #0e0e0e;
  gap: 1.6rem;
  .call__content-container {
    display: flex;
    flex-direction: column;
    padding: 0rem 13.5rem;
    gap: 1.6rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    h1 {
      width: 80.8rem;
    }
    .call__checklist-container {
      display: flex;
      gap: 2rem;
      .call__checkbox {
        display: flex;
        gap: 0.8rem;
        justify-items: center;
        align-items: center;
        .call__checkbox__img-container {
          width: 2rem;
          height: 2rem;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
  .call__btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.founder__section {
  display: flex;
  padding: 6.4rem 13.5rem;
  justify-content: space-between;
  background-color: var(--dark);
  position: relative;
  overflow: hidden;
}
.founder__section::before {
  content: "";
  position: absolute;
  width: 100%;
  background: linear-gradient(
    259deg,
    rgba(255, 255, 255, 0.1) 0.28%,
    #fff 50.14%,
    rgba(255, 255, 255, 0.1) 97.6%
  );
  top: 0;
  left: 0;
  height: 0.1rem;
}
.founder__section::after {
  content: "";
  position: absolute;
  width: 100%;
  background: linear-gradient(
    259deg,
    rgba(255, 255, 255, 0.1) 0.28%,
    #fff 50.14%,
    rgba(255, 255, 255, 0.1) 97.6%
  );
  bottom: 0;
  left: 0;
  height: 0.1rem;
}
.founder__left-block {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  max-width: 60rem;
  .founder__text-container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    p {
      font-size: var(--font-size-body-md);
      line-height: var(--font-line-height-md);
      color: rgba(255, 255, 255, 0.8);
    }
  }
  button.btn.btn--large {
    max-width: 29rem;
  }
}
.btn_founder_cta_mobile {
  display: none;
}
.founder__right-block {
  height: 100%;
  display: flex;
  justify-content: center;
  right: 17rem;
  bottom: 10rem;
}
aside.sticky-footer-banner {
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 0.8rem 0.8rem;
  justify-content: center;
  align-items: center;
  background: linear-gradient(270deg, #3535e2 0%, #00f 87.98%);
  /* background-color: var(--dark); */
  /* outline: 0.2rem solid var(--primary-color); */
  width: 100%;
  gap: 0.8rem;
  z-index: 2;
  p {
    text-align: center;
    font-size: var(--font-size-body-md);
    line-height: var(--font-line-height-md);
  }
  a {
    font-size: var(--font-size-body-md);
    line-height: var(--font-line-height-md);
    text-decoration: underline;
  }
}

/* Footer */
footer {
  display: flex;
  flex-direction: column;
  padding: 6.4rem;
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 2.4rem;
  .footer__wrapper {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    .footer__block-1 {
      display: flex;
      flex-direction: column;
      gap: 3.2rem;
      .footer__logo-and-desc {
        display: flex;
        gap: 1.6rem;
        justify-content: center;
        align-items: start;
        p {
          font-size: var(--font-size-body-md);
          line-height: var(--font-line-height-md);
        }
        .footer__logo-icon-container {
          width: fit-content;
          height: 5rem;
          img {
            object-fit: contain;
          }
        }
        .footer__logo-and-desc-line {
          width: 2px;
          background: rgba(255, 255, 255, 0.6);
          height: 43px;
        }
        p {
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .footer__emails-container {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        p {
          font-size: var(--font-size-body-md);
          line-height: var(--font-line-height-md);
        }
      }
    }
    .footer__block-2 {
      display: flex;
      flex-direction: column;
      max-width: 29rem;
      justify-content: center;
      align-items: start;
      gap: 1.7rem;
      p {
        font-size: var(--font-size-body-md);
        line-height: var(--font-line-height-md);
        color: rgba(255, 255, 255, 0.8);
      }
      .footer__smm-icons-container {
        display: flex;
        gap: 1.1rem;
        height: 3rem;
        .footer__smm-icon-box {
          width: 2.857rem;
          img {
            object-fit: contain;
          }
        }
      }
    }
  }
  .footer__copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-body-xs);
    line-height: var(--font-line-height-xs);
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 56.5%;
  }
  body {
    overflow-x: hidden;
  }
  header#site-header {
    padding: 1.7rem 1.5rem;
    width: 100vw;
  }
  .hero__section {
    padding-left: unset;
    padding-right: unset;
  }
  .hero__detail-container {
    width: 100%;
    padding: 1.2rem;
    background: unset;
    border: unset;
    border-radius: unset;
  }
  .stats__section {
    padding: 4rem 4.8rem;
  }
  .optimize__section .optimize__blocks-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .roadmap__section {
    padding: 6.4rem 4rem;
  }
  .roadmap__cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .roadmap__chips-row {
    display: none; /* Hide chip row at this breakpoint — cards carry the content */
  }
  .casestudy__card {
    flex: 0 0 38rem;
  }
  .founder__section {
    flex-direction: column;
    gap: 3.6rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    .founder__left-block button {
      display: none;
    }
    .founder__right-block {
      position: unset;
      width: unset;
      height: 43rem;
      display: flex;
      justify-content: center;
      right: unset;
      bottom: unset;
    }
    .btn_founder_cta_mobile {
      display: flex;
    }
  }
}

@media screen and (max-width: 960px) {
  #optimize,
  #work,
  #pricing,
  #call,
  #faq,
  #founder,
  footer {
    padding: 6.4rem;
  }
  .nav__container-links {
    display: none;
  }
  .hero__detail-container {
    flex-direction: column;
  }
  .stats__section {
    padding: 3.2rem;
  }
  .stats__item {
    padding: 1.6rem 2.4rem;
  }
  .videos__section {
    padding: 6.4rem 0;
  }
  .videos__videos-slider {
    flex-direction: column;
  }
  .work__showcase-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .roadmap__section {
    padding: 6.4rem 3.2rem;
  }
  .casestudies__header {
    padding: 0 1.2rem;
  }
  .package__section .package__pricing-cards-container {
    gap: 1.4rem;
    flex-direction: column;
    .package__pricing-card {
      max-width: unset;
      width: 100%;
    }
  }
  .faq__section {
    .faq__content-container {
      align-items: start;
      .faq__conent-header {
        align-items: start;
      }
      p {
        width: 100%;
        text-align: start;
      }
    }
    .accordion .accordion-item button:first-child span.accordion-title {
      max-width: 90%;
    }
  }
  .call__section .call__content-container {
    padding: 0rem;
    text-wrap: balance;
  }

  footer .footer__block-1 .footer__logo-and-desc {
    max-width: 28rem;
    flex-direction: column;
    align-items: start;
    span {
      display: none;
    }
  }
}
@media screen and (max-width: 768px) {
  #optimize,
  #work,
  #pricing,
  #call,
  #founder,
  footer {
    padding: 3.2rem;
  }
  /* .hero__video-bg {
    width: 100vw;
  } */
  html {
    font-size: 52.5%;
  }
  .optimize__section {
    h1:first-child {
      max-width: unset;
      width: 100%;
    }
    .optimize__blocks-container {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .stats__item:nth-child(2)::after {
    display: none; /* Remove divider after 2nd on 2-col layout */
  }
  /* Add bottom border to top row items */
  .stats__item:nth-child(1),
  .stats__item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .work__section .work__content-container {
    width: 100%;
  }
  .call__section .call__content-container,
  .package__section .package__text-container,
  .work__section .work__content-container .work__text-container {
    h1,
    p {
      width: 100%;
    }
  }
  .videos__section .videos__content-container {
    padding: 0 3.2rem;
    h1,
    p {
      width: 100%;
    }
  }
  .roadmap__cards-row {
    grid-template-columns: repeat(1, 1fr);
  }
  .casestudy__card {
    flex: 0 0 32rem;
  }
  .package__section {
    gap: 3.2rem;
    .package__text-container {
      width: 100%;
      p {
        width: 100%;
      }
    }
  }
  /* footer {
    padding-bottom: 2.4rem;
  } */
}

@media screen and (max-width: 540px) {
  html {
    font-size: 50%; /* 1rem = 8px */
  }
  h1 {
    font-size: var(--font-size-h3);
  }
  section {
    overflow: hidden;
  }
  header#site-header {
    padding: 1.7rem 1.5rem;
  }
  #site-header .btn--large {
    padding: var(--btn-padding-sm);
    min-width: 4.8rem;
    min-height: 4.8rem;
    cursor: pointer;
  }
  #site-header .nav__container .nav__container-img {
    width: 120px;
    height: auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  #site-header.nav--scrolled {
    padding: 1.7rem 0rem;
  }
  #site-header.nav--scrolled .nav__container {
    padding: 1.2rem 1.4rem 1.2rem 1.8rem;
    border-radius: 10rem;
    .nav__container-img {
      width: 120px;
      height: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  #site-header .nav__container .nav-btn__wrapper {
    .btn--large {
      display: none;
    }
  }
  .hero__section {
    padding: 16rem 1.6rem 10rem;
  }
  .hero__section h1 {
    font-size: var(--font-size-h2);
  }

  .stats__section {
    padding: 3.2rem 1.6rem;
  }
  .stats__item {
    padding: 1.6rem 1.6rem;
  }
  .stats__number {
    font-size: var(--font-size-h3);
  }
  .work__content-container > button {
    display: none;
  }
  .work__showcase-container {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.6rem;
    .work__showcase-content-head {
      justify-content: space-between;
      button {
        display: flex;
      }
    }
  }
  .roadmap__section {
    padding: 4.8rem 1.6rem;
  }
  .casestudies__section {
    padding: 6.4rem 0 4rem;
  }
  .casestudy__card {
    flex: 0 0 28rem;
  }
  .casestudy__card-img {
    height: 20rem;
  }
  .call__section {
    h1 {
      text-align: start;
    }
    .call__checklist-container {
      width: 100%;
      flex-direction: column;
      justify-content: start;
      text-align: start;
    }
    gap: 2.4rem;
  }

  aside.sticky-footer-banner {
    font-size: 12px;
    padding: 7px 0px;
    flex-direction: column;
    text-align: center;
    a {
      display: none;
    }
  }
  footer {
    gap: 1.6rem;
    margin-bottom: 3.22rem;
    .footer__wrapper {
      flex-direction: column;
      gap: 1.8rem;
      .footer__block-1 {
        .footer__emails-container {
          gap: 0rem;
        }
        .footer__logo-and-desc p {
          display: none;
        }
      }
      .footer__block-2 {
        gap: 1.4rem;
        justify-content: center;
        p {
          font-size: var(--btn-font-size-sm);
          line-height: var(--font-line-height-sm);
        }
        .footer__smm-icons-container {
          gap: 1.6rem;
          justify-content: start;
          width: 100%;
          height: fit-content;
        }
      }
    }
    .footer__copyright {
      text-align: start;
    }
  }
}

/* =========================================
   HAMBURGER BUTTON
   ========================================= */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 4.4rem;
  height: 4.4rem;
  background: none;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.hamburger:hover {
  background: rgba(255, 255, 255, 0.14);
}
.hamburger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease;
  transform-origin: center;
}
/* Animate to X when open */
.hamburger.is-open .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open .hamburger__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.hamburger.is-open .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================
   DRAWER OVERLAY
   ========================================= */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* =========================================
   SIDE DRAWER
   ========================================= */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(75vw, 32rem);
  background: #0d0d0f;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2.8rem 3.2rem;
  gap: 3.2rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.nav-drawer.is-open {
  transform: translateX(0);
}

/* Drawer header row */
.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.nav-drawer__logo {
  height: 2.8rem;
  width: auto;
}

/* Close (×) button */
.nav-drawer__close {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.nav-drawer__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.nav-drawer__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.nav-drawer__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-drawer__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Nav links list */
.nav-drawer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* flex: 1; */
}
.nav-drawer__links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-drawer__links li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-drawer__links a {
  display: block;
  padding: 1.6rem 0.4rem;
  font-size: var(--font-size-body-lg);
  font-family: var(--font-family-body);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.nav-drawer__links a:hover {
  color: #fff;
  padding-left: 0.8rem;
  opacity: 1;
}
.nav-drawer__links a.active {
  color: var(--primary-color);
}

/* CTA at bottom of drawer */
.nav-drawer__cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.nav-drawer__cta .btn {
  width: 100%;
  justify-content: center;
}

/* =========================================
   SHOW HAMBURGER AT ≤960px
   ========================================= */
@media screen and (max-width: 960px) {
  .hamburger {
    display: flex;
  }
}

/* =========================================
   PAST CLIENTS SECTION
   ========================================= */
.clients__section {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 8rem 5rem;
  background: #0a0a0a;
}

/* Two-column header: heading left, description right */
.clients__header {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  width: 100%;
}

.clients__header h1 {
  flex: 0 0 44%;
  font-size: var(--font-size-h1);
  line-height: 1.15;
}

.clients__description {
  flex: 1;
  font-size: var(--font-size-body-lg);
  line-height: var(--font-line-height-lg);
  color: rgba(255, 255, 255, 0.6);
  align-self: center;
}

/* Divider between header and tabs */
.clients__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}

/* Tabs row */
.clients__tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
}

/* Individual tab button */
.clients__tab {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99rem;
  padding: 0.4rem 3.2rem;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-medium);
  color: var(--light);
  border: none;
  background: linear-gradient(134deg, #212121 0%, #151515 100%);
  white-space: nowrap;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

/* Gradient border on inactive tabs via mask technique */
.clients__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(138deg, #393939 0%, #151515 49.26%, #151515 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Active tab: gradient fill, no border */
.clients__tab--active {
  background: linear-gradient(90deg, #00f 0%, #3535e2 87.98%);
}

.clients__tab--active::before {
  display: none;
}

.clients__tab:not(.clients__tab--active):hover {
  opacity: 0.75;
}

/* Logo grid */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
}

/* Individual logo card */
.clients__logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 168 / 160;
  background: #fff;
  border-radius: 1.6rem;
  padding: 1.6rem;
  overflow: hidden;
  cursor: default;
  transition: box-shadow 0.25s ease;
}

.clients__logo-card img {
  max-width: 80%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Grayscale (desaturated) by default to match design */
  filter: grayscale(1) saturate(0);
  transition: filter 0.3s ease;
}

/* On hover: reveal original logo color */
.clients__logo-card:hover img {
  filter: grayscale(0) saturate(1);
}

.clients__logo-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Hidden state when filtered out */
.clients__logo-card.is-hidden {
  display: none;
}

/* =========================================
   CLIENTS SECTION — RESPONSIVE
   ========================================= */
@media screen and (max-width: 1200px) {
  .clients__section {
    padding: 6.4rem 3.2rem;
  }

  .clients__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 960px) {
  .clients__section {
    padding: 6.4rem 2.4rem;
    gap: 3.2rem;
  }

  .clients__header {
    flex-direction: column;
    gap: 1.6rem;
  }

  .clients__header h1 {
    flex: unset;
    width: 100%;
  }

  .clients__description {
    align-self: unset;
  }

  .clients__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .clients__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .clients__tabs-container {
    gap: 1.2rem;
  }
}

@media screen and (max-width: 540px) {
  .clients__section {
    padding: 4.8rem 1.6rem;
    gap: 2.4rem;
  }

  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .clients__tab {
    padding: 0.4rem 2rem;
    font-size: var(--font-size-body-sm);
  }
}