/** Shopify CDN: Minification failed

Line 505:0 All "@import" rules must come first
Line 672:0 All "@import" rules must come first
Line 940:0 All "@import" rules must come first
Line 1397:0 All "@import" rules must come first
Line 1798:0 All "@import" rules must come first
Line 1909:0 All "@import" rules must come first
Line 2089:0 All "@import" rules must come first
Line 2268:0 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:banner-overlap (INDEX:13) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400;700&display=swap');

  .bovlp {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    z-index: 1;
  }

  @media screen and (min-width: 750px) {
    .bovlp {
      margin-top: calc(var(--bovlp-overlap) * -1);
      min-height: var(--bovlp-min-height);
      height: clamp(350px, 56vw, 700px);
    }
  }

  .bovlp__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 0;
  }

  .bovlp__slide--active {
    opacity: 1;
  }

  .bovlp__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .bovlp__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bovlp-overlay);
    opacity: var(--bovlp-overlay-opacity);
    z-index: 1;
  }

  .bovlp__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 20px 32px;
  }

  @media screen and (min-width: 750px) {
    .bovlp__container {
      padding: 120px 40px 60px;
    }
  }

  /* Content Position */
  .bovlp__content {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  @media screen and (min-width: 750px) {
    .bovlp__content {
      gap: 20px;
    }
  }

  .bovlp__content--left {
    margin-right: auto;
  }

  .bovlp__content--center {
    margin: 0 auto;
    text-align: center;
    align-items: center;
  }

  .bovlp__content--right {
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
  }

  /* Subheading */
  .bovlp__subheading {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: white;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .bovlp__subheading {
      font-size: 13px;
    }
  }

  /* Heading */
  .bovlp__heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    color: var(--bovlp-heading);
    margin: 0;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: pre-wrap;
  }

  .bovlp__heading--small {
    font-size: 22px;
  }

  .bovlp__heading--medium {
    font-size: 28px;
  }

  .bovlp__heading--large {
    font-size: 32px;
  }

  @media screen and (min-width: 750px) {
    .bovlp__heading--small {
      font-size: 36px;
    }

    .bovlp__heading--medium {
      font-size: 48px;
    }

    .bovlp__heading--large {
      font-family: 'Syne', sans-serif;
      font-size: 60px;
      font-weight: 700;
      line-height: 60px;
    }
  }

  /* Description */
  .bovlp__description {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    color: var(--bovlp-text);
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .bovlp__description {
      font-size: 16px;
    }
  }

  .bovlp__description p {
    margin: 0;
  }

  /* Button */
  .bovlp__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.25s ease;
    align-self: flex-start;
    margin-top: 4px;
  }

  @media screen and (min-width: 750px) {
    .bovlp__button {
      font-size: 14px;
      padding: 14px 32px;
    }
  }

  .bovlp__content--center .bovlp__button {
    align-self: center;
  }

  .bovlp__content--right .bovlp__button {
    align-self: flex-end;
  }

  .bovlp__button--filled {
    background-color: var(--bovlp-btn-bg);
    color: var(--bovlp-btn-text);
    border: 2px solid var(--bovlp-btn-bg);
  }

  .bovlp__button--filled:hover {
    background-color: transparent;
    color: var(--bovlp-btn-bg);
  }

  .bovlp__button--outline {
    background-color: transparent;
    color: var(--bovlp-btn-text);
    border: 2px solid var(--bovlp-btn-text);
  }

  .bovlp__button--outline:hover {
    background-color: var(--bovlp-btn-text);
    color: var(--bovlp-overlay);
  }
/* END_SECTION:banner-overlap */

/* START_SECTION:collection-tabs (INDEX:24) */
.ctabs {
    background-color: transparent;
    padding: 40px 16px;
    padding-bottom: calc(40px + var(--ctabs-overlap));
    position: relative;
    z-index: 2;

    @media screen and (min-width: 750px) {
      padding: 60px 24px;
      padding-bottom: calc(60px + var(--ctabs-overlap));
    }
  }

  .ctabs__container {
    max-width: 1440px;
    margin: 0 auto;
  }

  .ctabs__heading {
    text-align: center;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ctabs-text);
    margin: 0 0 24px 0;

    @media screen and (min-width: 750px) {
      font-size: 32px;
      margin: 0 0 32px 0;
    }
  }

  /* Tabs Nav - wrapped in a single pill border */
  .ctabs__nav-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;

    @media screen and (min-width: 750px) {
      margin-bottom: 40px;
    }
  }

  .ctabs__nav {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 30px;
    background: #F8F8F8;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ctabs__nav::-webkit-scrollbar {
    display: none;
  }

  .ctabs__tab {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 400;
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    background: transparent;
    color: #262626;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;

    @media screen and (min-width: 750px) {
      font-size: 15px;
      padding: 10px 24px;
    }
  }

  .ctabs__tab:hover {
    color: #262626;
    background: rgba(40, 66, 239, 0.08);
  }

  .ctabs__tab--active {
    background-color: var(--ctabs-accent);
    color: #fff;
  }

  .ctabs__tab--active:hover {
    color: #fff;
    background-color: var(--ctabs-accent);
  }

  /* Product Grid */
  .ctabs__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;

    @media screen and (min-width: 550px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
  }

  /* Product Card */
  .ctabs__card {
    background: #F8F8F8;
    border-radius: 32px;
    border: none;
    overflow: hidden;
    position: relative;
    padding: 32px 49px 32px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    
  }

  .ctabs__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  }

  /* Badge */
  .ctabs__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background-color: var(--ctabs-badge-bg);
    color: var(--ctabs-badge-text);
    font-family: Poppins, sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    z-index: 1;
  }

  .ctabs__card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }

 

  .ctabs__card-title {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    margin: 0;
    line-height: 24px;
    letter-spacing: 0;

    @media screen and (min-width: 750px) {
      font-size: 16px;
    }
  }

  /* Image area */
  .ctabs__card-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  .ctabs__card-image {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  .ctabs__card-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
  }

  /* Footer with price pill + button */
  .ctabs__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    gap: 12px;
    margin-top: 12px;
  }

  .ctabs__card-price {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    border-radius: 30px;
    padding: 10px 20px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
    letter-spacing: 0;
    background: #fff;

    @media screen and (min-width: 750px) {
      font-size: 16px;
    }
  }

  .ctabs__card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: var(--ctabs-btn-bg);
    color: var(--ctabs-btn-text);
    border-radius: 30px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    height: 40px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;

    @media screen and (min-width: 750px) {
      font-size: 16px;
    }
  }

  .ctabs__card-btn:hover {
    opacity: 0.85;
  }
/* END_SECTION:collection-tabs */

/* START_SECTION:custom-hero-banner (INDEX:36) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400;700&display=swap');

  .aqua-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 288 / 163;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  @media screen and (max-width: 749px) {
    .aqua-hero {
      aspect-ratio: auto;
      min-height: 500px;
    }
  }

  /* ── Background Media ── */
  .aqua-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .aqua-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .aqua-hero__img--mobile {
    display: none;
  }

  .aqua-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  @media screen and (max-width: 749px) {
    .aqua-hero__img:not(.aqua-hero__img--mobile) {
      display: none;
    }

    .aqua-hero__img--mobile {
      display: block;
    }
  }

  .aqua-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
  }

  /* ── Content ── */
  .aqua-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 48px 24px;
    margin-top: 232px;
  }

  @media screen and (min-width: 750px) {
    .aqua-hero__content {
      padding: 64px 48px;
    }
  }

  .aqua-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
  }

  
  /* ── Title ── */
  .aqua-hero__title {
    font-family: 'Syne', sans-serif;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    max-width: 935px;
  }

  @media screen and (min-width: 990px) {
    .aqua-hero__title {
      font-size: 70px;
      line-height: 70px;
    }
  }

  /* ── Description ── */
  .aqua-hero__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    margin: 0 0 32px 0;
    max-width: 520px;
  }

  /* ── Buttons ── */
  .aqua-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .aqua-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 28px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
  }

  .aqua-hero__btn:hover {
    opacity: 0.85;
  }

  .aqua-hero__btn--outline {
    color: var(--ah-btn1-text, #ffffff);
    background-color: var(--ah-btn1-bg, transparent);
    border: 1px solid var(--ah-btn1-border, #ffffff);
  }

  .aqua-hero__btn--solid {
    color: var(--ah-btn2-text, #ffffff);
    background-color: var(--ah-btn2-bg, #2842EF);
    border: 1px solid var(--ah-btn2-bg, #2842EF);
  }

  @media screen and (max-width: 749px) {
    .aqua-hero__buttons {
      flex-direction: column;
    }

    .aqua-hero__btn {
      width: 100%;
    }
  }
/* END_SECTION:custom-hero-banner */

/* START_SECTION:feature-grid (INDEX:47) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400;700&display=swap');

  .fgrid {
    background-color: var(--fgrid-bg);
    padding: 48px 16px;
  }

  @media screen and (min-width: 750px) {
    .fgrid {
      padding: 80px 24px;
    }
  }

  .fgrid__container {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* ── Grid Layout ── */
  .fgrid__layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }

  @media screen and (min-width: 990px) {
    .fgrid__layout {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 30%;
      row-gap: 0;
      align-items: center;
      min-height: 600px;
    }
  }

  @media screen and (min-width: 1200px) {
    .fgrid__layout {
      column-gap: 34%;
      min-height: 700px;
    }
  }

  /* ── Product Center ── */
  .fgrid__product {
    display: flex;
    align-items: center;
    justify-content: center;
    order: -1;
  }

  @media screen and (min-width: 990px) {
    .fgrid__product {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      order: unset;
      pointer-events: none;
      width: 40%;
    }
  }

  /* ── Carousel ── */
  .fgrid__carousel {
    width: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
  }

  @media screen and (min-width: 990px) {
    .fgrid__carousel {
      width: 100%;
    }
  }

  /* When only one image is present, no animation needed */
  .fgrid__carousel--single .fgrid__carousel-track {
    animation: none !important;
  }

  .fgrid__carousel-track {
    display: flex;
    flex-direction: column;
    /* 3 slides × aspect-ratio height each — track is 3× tall */
    animation: fgrid-vscroll 7s linear infinite;
  }

  .fgrid__carousel-slide {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  /*
    Track holds 3 equally-sized slides: [img1] [img2] [img1-clone]
    translateY percentages are relative to the track's own height.
    -33.333% → show img2  |  -66.666% → show img1-clone (= img1, seamless reset)
  */
  @keyframes fgrid-vscroll {
    0%,
    28% {
      transform: translateY(0);
    }
    38%,
    63% {
      transform: translateY(-33.333%);
    }
    73%,
    100% {
      transform: translateY(-66.666%);
    }
  }

  .fgrid__product-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .fgrid__placeholder {
    width: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.15;
  }

  @media screen and (min-width: 990px) {
    .fgrid__placeholder {
      width: 100%;
    }
  }

  /* ── Feature Items ── */
  .fgrid__feature {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .fgrid__feature {
      position: relative;
      z-index: 1;
      gap: 20px;
      padding: 20px;
    }
  }

  @media screen and (min-width: 750px) {
    .fgrid__feature--tl {
      grid-column: 1;
      grid-row: 1;
      align-self: end;
      justify-self: stretch;
    }

    .fgrid__feature--bl {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      justify-self: stretch;
    }

    .fgrid__feature--tr {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      justify-self: stretch;
    }

    .fgrid__feature--br {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
      justify-self: stretch;
    }
  }

  /* ── Feature Text ── */
  .fgrid__feature-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
  }

  @media screen and (min-width: 750px) {
    .fgrid__feature-text {
      gap: 12px;
    }
  }

  /* Heading — Syne */
  .fgrid__heading {
    font-family: 'Syne', sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.1;
    color: var(--fgrid-heading);
    margin: 0;
    text-transform: uppercase;
  }

  @media screen and (min-width: 750px) {
    .fgrid__heading {
      font-size: 28px;
    }
  }

  @media screen and (min-width: 990px) {
    .fgrid__heading {
      font-size: 40px;
      line-height: 40px;
    }
  }

  /* Description — Roboto */
  .fgrid__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    color: var(--fgrid-text);
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .fgrid__desc {
      font-size: 16px;
    }
  }

  /* ── Arrows ── */
  .fgrid__arrow {
    width: 100%;
    display: none;
  }

  @media screen and (min-width: 750px) {
    .fgrid__arrow {
      display: block;
    }
  }

  .fgrid__arrow img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
/* END_SECTION:feature-grid */

/* START_SECTION:footer (INDEX:52) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400;700&display=swap');

  .custom-footer-new {
    background-color: var(--cf-bg, #2D2D2D);
    color: var(--cf-text, #ffffff);
    padding: 48px 24px;
  }

  @media screen and (min-width: 750px) {
    .custom-footer-new {
      padding: 64px 48px;
    }
  }

  /* ── Grid ── */
  .cfn__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
  }

  @media screen and (min-width: 990px) {
    .cfn__container {
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 40px;
      align-items: start;
    }
  }

  /* ── Left: Brand ── */
  .cfn__logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 16px;
  }

  .cfn__logo-img {
    display: block;
    width: var(--cf-logo-width, 120px);
    height: auto;
  }

  .cfn__logo-text {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--cf-text, #ffffff);
  }

  .cfn__heading {
    font-family: 'Syne', sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    font-style: italic;
    color: var(--cf-heading, #ffffff);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.01em;
  }

  @media screen and (min-width: 990px) {
    .cfn__heading {
      font-size: 60px;
      line-height: 60px;
    }
  }

  /* ── Column Headings ── */
  .cfn__col-heading {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--cf-heading, #ffffff);
    margin: 0 0 20px 0;
    text-transform: none;
  }

  /* ── Links ── */
  .cfn__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cfn__link-item {
    margin: 0 0 12px 0;
  }

  .cfn__link-item:last-child {
    margin-bottom: 0;
  }

  .cfn__link {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--cf-text, #ffffff);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .cfn__link:hover {
    opacity: 0.7;
  }

  /* ── Contact ── */
  .cfn__contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }

  .cfn__contact-item {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--cf-text, #ffffff);
    margin: 0;
  }

  .cfn__contact-item a {
    color: var(--cf-text, #ffffff);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .cfn__contact-item a:hover {
    opacity: 0.7;
  }

  /* ── Button ── */
  .cfn__btn {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--cf-btn-text, #ffffff);
    background-color: var(--cf-btn-bg, #2842EF);
    border: none;
    border-radius: 999px;
    padding: 10px 32px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin-bottom: 24px;
  }

  .cfn__btn:hover {
    opacity: 0.85;
  }

  @media screen and (max-width: 989px) {
    .cfn__btn {
      display: block;
      width: 100%;
    }
  }

  /* ── Copyright ── */
  .cfn__copyright {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--cf-text, #ffffff);
    margin: 0;
    opacity: 0.6;
  }
/* END_SECTION:footer */

/* START_SECTION:info-grid (INDEX:62) */
.igrd {
    background-color: var(--igrd-section-bg);
    padding: 40px 16px;

    @media screen and (min-width: 750px) {
      padding: 60px 24px;
    }
  }

  .igrd__container {
    max-width: 1440px;
    margin: 0 auto;
  }

  /* Grid Layout */
  .igrd__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
    }
  }

  /* Cards Base */
  .igrd__card {
    border-radius: var(--igrd-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }

  a.igrd__card {
    transition: transform 0.25s ease;
  }

  a.igrd__card:hover {
    transform: translateY(-2px);
  }

  /* Left Card */
  .igrd__card--left {
    background-color: var(--igrd-left-bg);
    background-image: var(--igrd-left-bgimg, none);
    background-size: cover;
    background-position: center;
    padding: 32px 24px;
    gap: 20px;

    @media screen and (min-width: 750px) {
      grid-row: 1 / 3;
      padding: 48px 40px;
      gap: 24px;
    }
  }

  /* Top-Right Card */
  .igrd__card--tr {
    background-color: var(--igrd-tr-bg);
    background-image: var(--igrd-tr-bgimg, none);
    background-size: cover;
    background-position: center;
    padding: 28px 24px;
    justify-content: space-between;

    @media screen and (min-width: 750px) {
      padding: 36px 36px;
    }
  }

  /* Bottom-Right Card */
  .igrd__card--br {
    background-color: var(--igrd-br-bg);
    background-image: var(--igrd-br-bgimg, none);
    background-size: cover;
    background-position: center;
    padding: 0;
  }

  .igrd__card-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
  }

  .igrd__card-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 4vw, 36px) clamp(18px, 3.5vw, 36px);
    flex: 1 1 50%;
    min-width: 0;
  }

  .igrd__card-image {
    flex: 0 0 clamp(44%, 48%, 52%);
    position: relative;
    overflow: hidden;
    border-radius: 0 var(--igrd-radius) var(--igrd-radius) 0;
  }

  .igrd__card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Card Header (subheading + arrow row) */
  .igrd__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  /* Subheadings */
  .igrd__subheading {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 0;

    @media screen and (min-width: 750px) {
      font-size: 14px;
    }
  }

  .igrd__card--left .igrd__subheading {
    color: var(--igrd-left-sub);
  }

  .igrd__subheading--tr {
    color: var(--igrd-tr-sub);
  }

  .igrd__subheading--br {
    color: var(--igrd-br-sub);
  }

  /* Headings */
  .igrd__heading {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
  }

  .igrd__heading--left {
    color: var(--igrd-left-heading);
    font-size: 32px;

    @media screen and (min-width: 750px) {
      font-size: 42px;
    }
  }

  .igrd__heading--tr {
    color: var(--igrd-tr-heading);
    font-size: 28px;

    @media screen and (min-width: 750px) {
      font-size: 68px;
      max-width: 540px;
    }
  }

  .igrd__heading--br {
    color: var(--igrd-br-heading);
    font-size: 28px;

    @media screen and (min-width: 750px) {
      font-size: 45px;
    }
  }

  /* Description */
  .igrd__description {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--igrd-left-text);

    @media screen and (min-width: 750px) {
      font-size: 14px;
    }
  }

  .igrd__description p {
    margin: 0 0 16px 0;
  }

  .igrd__description p:last-child {
    margin-bottom: 0;
  }

  /* Button */
  .igrd__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background-color: var(--igrd-left-btn-bg);
    color: var(--igrd-left-btn-text);
    border-radius: 30px;
    text-decoration: none;
    transition: opacity 0.25s ease;
    align-self: flex-start;
    margin-top: auto;

    @media screen and (min-width: 750px) {
      font-size: 14px;
      padding: 14px 32px;
    }
  }

  .igrd__button:hover {
    opacity: 0.85;
  }

  /* Arrow Icons */
  .igrd__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;

    @media screen and (min-width: 750px) {
      width: 36px;
      height: 36px;
    }
  }

  .igrd__arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .igrd__arrow svg {
    width: 24px;
    height: 24px;

    @media screen and (min-width: 750px) {
      width: 28px;
      height: 28px;
    }
  }

  .igrd__arrow--tr {
    color: var(--igrd-tr-arrow);
  }

  .igrd__arrow--br {
    color: var(--igrd-br-arrow);
  }
/* END_SECTION:info-grid */

/* START_SECTION:product-features-grid (INDEX:91) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400;700&display=swap');

  /* ══════════════════════════════════════════
     Section wrapper
  ══════════════════════════════════════════ */
  .fgrid {
    background-color: var(--fgrid-bg);
    padding: 48px 0;
  }

  .fgrid__container {
    max-width: 1440px;
    margin: 0 auto;
  }

  /* ══════════════════════════════════════════
     MOBILE LAYOUT  (< 990px)
  ══════════════════════════════════════════ */

  /* Hide desktop grid on mobile */
  .fgrid__layout {
    display: none;
  }

  /* Outer mobile wrapper */
  .fgrid__mobile {
    display: flex;
    flex-direction: column;
  }


  /* ── Horizontal scroll strip ── */
  .fgrid__mobile-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* thin scrollbar on supporting browsers */
    scrollbar-width: thin;
    scrollbar-color: #2842EF transparent;
    
  }

  .fgrid__mobile-scroller::-webkit-scrollbar {
    height: 3px;
  }

  .fgrid__mobile-scroller::-webkit-scrollbar-track {
    background: transparent;
  }

  .fgrid__mobile-scroller::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 2px;
  }

  .fgrid__mobile-track {
    display: flex;
    /* each card is exactly one viewport-width wide */
  }

  /* ── Individual text card ── */
  .fgrid__mobile-card {
    flex: 0 0 100vw;      /* exactly 1 card visible */
    min-width: 100vw;
    scroll-snap-align: start;
    padding: 48px 24px 32px;
    box-sizing: border-box;
  }

  /* ── Product image below text strip ── */
  .fgrid__mobile-image {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fgrid__mobile-image .fgrid__product-img,
  .fgrid__mobile-image .fgrid__placeholder {
    width: 100%;
    max-width: 543px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
  }

  .fgrid__mobile-image .fgrid__placeholder {
    opacity: 0.15;
  }

  /* ══════════════════════════════════════════
     DESKTOP LAYOUT  (≥ 990px)
  ══════════════════════════════════════════ */
  @media screen and (min-width: 990px) {

    .fgrid {
      padding: 80px 24px;
    }

    .fgrid__container {
      overflow: hidden;
    }

    /* Hide mobile strip on desktop */
    .fgrid__mobile {
      display: none;
    }

    /* Show desktop grid */
    .fgrid__layout {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 30%;
      row-gap: 0;
      align-items: center;
      min-height: 600px;
    }

    /* ── Product center ── */
    .fgrid__product {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      pointer-events: none;
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fgrid__product-img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }

    .fgrid__placeholder {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.15;
    }

    /* ── Feature items ── */
    .fgrid__feature {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px;
    }

    .fgrid__feature--tl { grid-column: 1; grid-row: 1; align-self: end;   justify-self: stretch; }
    .fgrid__feature--bl { grid-column: 1; grid-row: 2; align-self: start; justify-self: stretch; }
    .fgrid__feature--tr { grid-column: 2; grid-row: 1; align-self: end;   justify-self: stretch; }
    .fgrid__feature--br { grid-column: 2; grid-row: 2; align-self: start; justify-self: stretch; }

    /* ── Arrows ── */
    .fgrid__arrow {
      display: block;
      width: 100%;
    }

    .fgrid__arrow img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  @media screen and (min-width: 1200px) {
    .fgrid__layout {
      column-gap: 34%;
      min-height: 700px;
    }
  }

  /* ══════════════════════════════════════════
     Shared typography (both layouts)
  ══════════════════════════════════════════ */

  .fgrid__feature-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  /* Heading — Syne, matches Figma: 35px / 700 / 100% lh */
  .fgrid__heading {
    font-family: 'Syne', sans-serif;
    font-size: 35px;
    font-weight: 700;
    font-style: normal;
    line-height: 35px;
    color: var(--fgrid-heading);
    margin: 0;
    text-transform: uppercase;
  }

  @media screen and (min-width: 990px) {
    .fgrid__heading {
      font-size: 40px;
      line-height: 40px;
    }
  }

  /* Description — Roboto, matches Figma: 14px / 400 / 20px lh */
  .fgrid__desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: var(--fgrid-text);
    margin: 0;
  }

  @media screen and (min-width: 990px) {
    .fgrid__desc {
      font-size: 16px;
      line-height: 24px;
    }
  }

  /* Arrows hidden on mobile (only rendered inside .fgrid__layout which is desktop-only) */
  .fgrid__arrow {
    display: none;
  }
/* END_SECTION:product-features-grid */

/* START_SECTION:product-spec (INDEX:94) */
.pspec {
    position: relative;
    background-color: var(--pspec-bg);
    min-height: var(--pspec-min-height);
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  /* Full background image */
  .pspec__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  .pspec__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 24px;

    @media screen and (min-width: 750px) {
      padding: 80px 40px;
    }
  }

  /* Content */
  .pspec__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;

    @media screen and (min-width: 750px) {
      gap: 24px;
    }
  }

  .pspec__content--left {
    margin-right: auto;
  }

  .pspec__content--center {
    margin: 0 auto;
    text-align: center;
    align-items: center;
  }

  .pspec__content--right {
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
  }

  /* Subheading — Roboto 16px/24px 400 */
  .pspec__subheading {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    color: var(--pspec-sub);
    margin: 0;

    @media screen and (min-width: 750px) {
      font-size: 16px;
    }
  }

  /* Heading — Syne 70px/70px 700 */
  .pspec__heading {
    font-family: 'Syne', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 40px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.0;
    color: var(--pspec-heading);
    margin: 0;
    text-transform: uppercase;

    @media screen and (min-width: 750px) {
      font-size: 56px;
      line-height: 56px;
    }

    @media screen and (min-width: 990px) {
      font-size: 70px;
      line-height: 70px;
    }
  }

  /* Buttons */
  .pspec__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
  }

  .pspec__content--center .pspec__buttons {
    justify-content: center;
  }

  .pspec__content--right .pspec__buttons {
    justify-content: flex-end;
  }

  .pspec__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--pspec-radius);
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      font-size: 14px;
      padding: 14px 32px;
    }
  }

  .pspec__btn--outline {
    background-color: transparent;
    color: var(--pspec-btn1-text);
    border: 1.5px solid var(--pspec-btn1-border);
  }

  .pspec__btn--outline:hover {
    background-color: var(--pspec-btn1-border);
    color: var(--pspec-btn1-bg);
  }

  .pspec__btn--filled {
    background-color: var(--pspec-btn2-bg);
    color: var(--pspec-btn2-text);
    border: 1.5px solid var(--pspec-btn2-bg);
  }

  .pspec__btn--filled:hover {
    opacity: 0.88;
  }
/* END_SECTION:product-spec */

/* START_SECTION:tech-banner (INDEX:102) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap');

  .tb {
    position: relative;
    width: 100%;
    aspect-ratio: 89 / 50;
    overflow: hidden;
  }

  .tb__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .tb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .tb__img--mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .tb__img:not(.tb__img--mobile) {
      display: none;
    }
    .tb__img--mobile {
      display: block;
    }
  }

  .tb__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 80px;
  }

  .tb__content--v-top { align-items: flex-start; }
  .tb__content--v-center { align-items: center; }
  .tb__content--v-bottom { align-items: flex-end; }

  .tb__content--h-left { justify-content: flex-start; }
  .tb__content--h-center { justify-content: center; text-align: center; }
  .tb__content--h-right { justify-content: flex-end; text-align: right; }

  .tb__inner {
    max-width: 1440px;
    width: 100%;
  }

  .tb__heading {
    font-family: 'Syne', sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    color: var(--tb-heading-color, #ffffff);
    text-transform: uppercase;
    margin: 0;
    max-width: 612px;
  }

  /* ── Responsive ── */
  @media screen and (max-width: 989px) {
    .tb__content {
      padding: 60px 40px;
    }

    .tb__heading {
      font-size: 48px;
      line-height: 50px;
    }
  }

  @media screen and (max-width: 749px) {
    .tb {
      aspect-ratio: auto;
      min-height: 400px;
      height: 100vw;
    }

    .tb__content {
      position: absolute;
      inset: 0;
      padding: 40px 20px;
    }

    .tb__content--mv-top { align-items: flex-start; }
    .tb__content--mv-center { align-items: center; }
    .tb__content--mv-bottom { align-items: flex-end; }

    .tb__content--mh-left { justify-content: flex-start; text-align: left; }
    .tb__content--mh-center { justify-content: center; text-align: center; }
    .tb__content--mh-right { justify-content: flex-end; text-align: right; }

    .tb__heading {
      font-size: 36px;
      line-height: 38px;
      max-width: 100%;
    }
  }
/* END_SECTION:tech-banner */

/* START_SECTION:tech-cards (INDEX:103) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400;500&display=swap');

  .tc {
    background-color: var(--tc-section-bg, #ffffff);
    padding: 60px 0;
    width: 100%;
    overflow: hidden;
  }

  .tc__grid {
    display: flex;
    gap: 36px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 36px;
  }

  .tc__grid--fit .tc__card {
    flex: 1;
    min-width: 0;
  }

  .tc__grid--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tc__grid--scroll::-webkit-scrollbar {
    display: none;
  }

  .tc__grid--scroll .tc__card {
    flex: 0 0 calc(25% - 27px);
    min-width: 280px;
  }

  .tc__card {
    height: 553px;
    border-radius: var(--tc-card-radius, 32px);
    overflow: hidden;
    position: relative;
  }

  .tc__card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--tc-card-bg, rgba(38, 38, 38, 0.55));
  }

  /* ── Card Image ── */
  .tc__card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .tc__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ── Label Tag ── */
  .tc__label {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background-color: var(--tc-label-bg, rgba(255, 255, 255, 0.2));
    color: var(--tc-label-color, #ffffff);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
  }

  /* ── Heading ── */
  .tc__heading {
    position: relative;
    z-index: 2;
    font-family: 'Syne', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    color: var(--tc-heading-color, #ffffff);
    text-transform: uppercase;
    margin: 0;
    padding: 24px;
  }

  /* ── Overlay on image for text readability ── */
  .tc__card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
  }

  /* ── Responsive ── */
  @media screen and (max-width: 989px) {
    .tc__grid {
      gap: 24px;
      padding: 0 24px;
    }

    .tc__grid--fit {
      flex-wrap: wrap;
    }

    .tc__grid--fit .tc__card {
      flex: 0 0 calc(50% - 12px);
      height: 450px;
    }

    .tc__grid--scroll .tc__card {
      min-width: 250px;
      height: 450px;
    }
  }

  @media screen and (max-width: 749px) {
    .tc {
      padding: 40px 0;
    }

    .tc__heading {
      font-size: 35px;
      line-height: 35px;
    }

    .tc__label {
      font-size: 14px;
    }

    .tc__grid {
      gap: 20px;
      margin: 0 20px;
      padding: 0 0 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
      scrollbar-width: thin;
      scrollbar-color: #2842EF transparent;
    }

    .tc__grid::-webkit-scrollbar {
      height: 6px;
    }

    .tc__grid::-webkit-scrollbar-track {
      background: transparent;
    }

    .tc__grid::-webkit-scrollbar-thumb {
      background: #2842EF;
      border-radius: 5px;
    }

    .tc__grid--fit .tc__card,
    .tc__grid--scroll .tc__card {
      flex: 0 0 75vw;
      min-width: 260px;
      height: 450px;
    }
  }
/* END_SECTION:tech-cards */

/* START_SECTION:tech-features-alt (INDEX:104) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400&display=swap');

  .tfa {
    background-color: var(--tfa-bg, #ffffff);
    padding: 80px 0;
    width: 100%;
  }

  .tfa__container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 76px;
  }

  /* ── Left Side ── */
  .tfa__left {
    position: relative;
    width: 773px;
    height: 769px;
    flex-shrink: 0;
  }

  .tfa__rect {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 773px;
    height: 540px;
    border-radius: var(--tfa-rect-radius, 32px);
    background-color: var(--tfa-rect-bg, #262626);
  }

  .tfa__image-wrap {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 673px;
    z-index: 1;
    pointer-events: none;
  }

  .tfa__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }

  /* ── Right Side ── */
  .tfa__right {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 405px;
    flex-shrink: 0;
  }

  .tfa__feature-heading {
    font-family: 'Syne', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    color: var(--tfa-heading-color, #262626);
    text-transform: uppercase;
    margin: 0 0 12px 0;
  }

  .tfa__feature-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: var(--tfa-desc-color, #262626);
    margin: 0;
  }

  /* ── Responsive ── */
  @media screen and (max-width: 1200px) {
    .tfa__left {
      width: 550px;
      height: 580px;
    }

    .tfa__rect {
      width: 550px;
      height: 400px;
    }

    .tfa__image-wrap {
      width: 500px;
      height: 500px;
    }

    .tfa__feature-heading {
      font-size: 32px;
      line-height: 34px;
    }

    .tfa__feature-desc {
      font-size: 16px;
      line-height: 24px;
    }
  }

  @media screen and (max-width: 989px) {
    .tfa__container {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }

    .tfa__left {
      width: 100%;
      max-width: 600px;
      height: 500px;
    }

    .tfa__rect {
      width: 100%;
      height: 400px;
    }

    .tfa__image-wrap {
      width: 80%;
      height: 480px;
    }

    .tfa__right {
      max-width: 100%;
      text-align: center;
    }
  }

  @media screen and (max-width: 749px) {
    .tfa {
      padding: 40px 0;
    }

    .tfa__container {
      padding: 0 20px;
    }

    .tfa__right {
      gap: 32px;
    }

    .tfa__feature-heading {
      font-size: 28px;
      line-height: 30px;
    }

    .tfa__feature-desc {
      font-size: 16px;
      line-height: 24px;
    }

    .tfa__left {
      height: 400px;
    }

    .tfa__rect {
      height: 320px;
    }

    .tfa__image-wrap {
      height: 380px;
    }
  }
/* END_SECTION:tech-features-alt */

/* START_SECTION:tech-features (INDEX:105) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Roboto:wght@400&display=swap');

  .tf {
    background-color: var(--tf-bg, #ffffff);
    padding: 80px 0;
    width: 100%;
    overflow: hidden;
  }

  .tf__container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 147px;
  }

  /* ── Left Side ── */
  .tf__left {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 405px;
    flex-shrink: 1;
  }

  .tf__feature-heading {
    font-family: 'Syne', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    color: var(--tf-heading-color, #262626);
    text-transform: uppercase;
    margin: 0 0 12px 0;
  }

  .tf__feature-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    color: var(--tf-desc-color, #262626);
    margin: 0;
  }

  /* ── Right Side ── */
  .tf__right {
    position: relative;
    width: 773px;
    max-width: 100%;
    height: 769px;
    flex-shrink: 1;
  }

  .tf__rect {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 540px;
    border-radius: var(--tf-rect-radius, 32px);
    background-color: var(--tf-rect-bg, #55B7EA);
  }

  .tf__image-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .tf__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }

  /* ── Responsive ── */
  @media screen and (max-width: 1200px) {
    .tf__container {
      gap: 60px;
    }

    .tf__right {
      width: 550px;
      height: 500px;
    }

    .tf__rect {
      height: 380px;
    }

    .tf__feature-heading {
      font-size: 32px;
      line-height: 34px;
    }

    .tf__feature-desc {
      font-size: 16px;
      line-height: 24px;
    }
  }

  @media screen and (max-width: 989px) {
    .tf__container {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }

    .tf__left {
      max-width: 100%;
      text-align: center;
    }

    .tf__right {
      width: 100%;
      max-width: 600px;
      height: 400px;
    }

    .tf__rect {
      height: 320px;
    }
  }

  @media screen and (max-width: 749px) {
    .tf {
      padding: 40px 0;
    }

    .tf__container {
      padding: 0 20px;
    }

    .tf__left {
      gap: 32px;
    }

    .tf__feature-heading {
      font-size: 28px;
      line-height: 30px;
    }

    .tf__feature-desc {
      font-size: 16px;
      line-height: 24px;
    }

    .tf__right {
      height: 320px;
    }

    .tf__rect {
      height: 250px;
    }
  }
/* END_SECTION:tech-features */