:root{
    --ink:#1c1410;
    --sub:#7a6a5f;
    --rust:#8a3320;
    --rust-deep:#5f2011;
  }
  *{box-sizing:border-box;}

  /* ===================== SECTION ===================== */
  .integration-section{
    position:relative;
    overflow:hidden;
    /* max-width: 1350px; */
    background:linear-gradient(25deg,#fff6f4,#fdece8);
    padding:70px 20px 90px;
  }

  /* soft colorful ambient blobs, very low opacity so it stays subtle */
  .integration-section::before,
  .integration-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.16;
    pointer-events:none;
    z-index:0;
  }
  .integration-section::before{
    background:#2f6fed;
    top:-160px;
    left:-120px;
  }
  .integration-section::after{
    background:#e0457b;
    bottom:-180px;
    right:-120px;
  }

  .integration-section h2{
    position:relative;
    z-index:1;
    font-size:35px;
    text-align:center;
    color:var(--ink);
    margin:0 0 10px;
  }
  .integration-sub{
    position:relative;
    z-index:1;
    text-align:center;
    color:var(--sub);
    font-size:15px;
    max-width:520px;
    margin:0 auto;
  }

  /* ===================== WRAPPER / CARDS ===================== */
  .integration-wrapper{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1250px;
    height:300px;
    margin:30px auto 0;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .integration-card{
    --c:#8a3320;
    width:100px;
    height:100px;
    background:#fff;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:absolute;
    left:50%;
    top:50%;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    z-index:3;
    opacity:0;
    transform:translate(-50%,-50%) scale(.55);
    transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .55s ease, box-shadow .3s ease;
    cursor:pointer;
  }

  .integration-section.active .integration-card{
    opacity:1;
    transform:translate(calc(-50% + var(--x, 0px)), -50%) scale(1);
  }

  .integration-card:nth-child(1){ --x:-560px; --c:#ed682f; transition-delay:.34s; }
  .integration-card:nth-child(2){ --x:-430px; --c:#2f6fed; transition-delay:.34s; }
  .integration-card:nth-child(3){ --x:-310px; --c:#2fa84f; transition-delay:.22s; }
  .integration-card:nth-child(4){ --x:-180px; --c:#d99a1f; transition-delay:.10s; }
  .integration-card:nth-child(6){ --x:180px;  --c:#8b5cf6; transition-delay:.10s; }
  .integration-card:nth-child(7){ --x:310px;  --c:#14b8a6; transition-delay:.22s; }
  .integration-card:nth-child(8){ --x:430px;  --c:#e0457b; transition-delay:.34s; }
  .integration-card:nth-child(9){ --x:560px;  --c:#45d8e0; transition-delay:.34s; }

  .integration-card:hover{
    transform:translate(calc(-50% + var(--x, 0px)), -50%) translateY(-6px) scale(1.07) !important;
    box-shadow:0 18px 34px color-mix(in srgb, var(--c) 35%, transparent);
    z-index:20;
    -webkit-transform:translate(calc(-50% + var(--x, 0px)), -50%) translateY(-6px) scale(1.07) !important;
    -moz-transform:translate(calc(-50% + var(--x, 0px)), -50%) translateY(-6px) scale(1.07) !important;
    -ms-transform:translate(calc(-50% + var(--x, 0px)), -50%) translateY(-6px) scale(1.07) !important;
    -o-transform:translate(calc(-50% + var(--x, 0px)), -50%) translateY(-6px) scale(1.07) !important;
}

  .icon-badge{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb, var(--c) 15%, white);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease;
  }
  .integration-card:hover .icon-badge{
    transform:scale(1.1) rotate(-6deg);
    background:color-mix(in srgb, var(--c) 26%, white);
  }
  .icon-badge svg{
    width:24px;
    height:24px;
    stroke:var(--c);
    fill:none;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .integration-card span.label{
    position:absolute;
    top:112px;
    font-size:12px;
    font-weight:600;
    color:#111;
    white-space:nowrap;
    transition:color .3s ease;
  }
  .integration-card:hover span.label{ color:var(--c); }

  /* ===================== CENTER HUB ===================== */
  .integration-card.center{
    width:150px;
    height:150px;
    border-radius:28px;
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    z-index:5;
    background:linear-gradient(160deg,var(--rust),var(--rust-deep));
    box-shadow:0 16px 34px rgba(138,51,32,.30);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .integration-card.center .hub-mark svg{
    width:66px;
    height:66px;
    fill:#fff;
    stroke:none;
  }
  .integration-card.center:hover{
    transform:translate(-50%,-50%) scale(1.06);
    box-shadow:0 22px 44px rgba(138,51,32,.38);
  }

  .integration-card.center::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:36px;
    border:2px dashed rgba(138,51,32,.35);
    opacity:0;
  }
  .integration-card.center .ring{
    position:absolute;
    inset:0;
    border-radius:28px;
    border:1.5px solid rgba(138,51,32,.28);
    opacity:0;
    pointer-events:none;
  }
  .integration-section.active .integration-card.center::before{
    opacity:.6;
    animation:spin 40s linear infinite;
  }
  .integration-section.active .integration-card.center .ring{ animation:pulse 3s ease-out infinite; }
  .integration-section.active .integration-card.center .ring.r2{ animation-delay:1.5s; }

  @keyframes pulse{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.5); opacity:0; } }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ===================== CTA ===================== */
  .integration-container{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:60px;
  }

  .more-integration{
    color:#000;
    font-size:16px;
    text-transform:uppercase;
    font-weight:600;
    position:relative;
    padding-bottom:10px;
    display:inline-block;
    cursor:pointer;
    text-decoration:none;
    transition:color .35s ease;
  }
  .more-integration::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:160px;
    height:2px;
    background:linear-gradient(90deg,#2f6fed,#d99a1f,#e0457b);
    transition:width .35s ease;
  }
  .more-integration:hover{ color:var(--rust); text-decoration: none; }
  .more-integration:hover::after{ width:220px; }
    /* ===================== TABLET / SMALL-DESKTOP ===================== */
    @media (min-width:577px) and (max-width:1299px){ 
        .integration-section{ padding:50px 20px; }
        .integration-wrapper{ height:520px; }
        .integration-container {
          margin-top: 200px;
        }

        .integration-card{ width:85px; height:85px; }
        .icon-badge{ width:42px; height:42px; }
        .icon-badge svg{ width:21px; height:21px; }
        .integration-card span.label{ top:94px; font-size:12px; }

        .integration-card.center{ margin-top:30px; width:150px; height:150px; }
        .integration-card.center .hub-mark svg{ width:60px; height:60px; }

        .integration-section.active .integration-card:not(.center){
            transform:translate(var(--tx,0px), var(--ty,0px)) scale(1);
        }
        .integration-card:not(.center):hover{
            transform:translate(var(--tx,0px), var(--ty,0px)) translateY(-5px) scale(1.08) !important;
            -webkit-transform:translate(var(--tx,0px), var(--ty,0px)) translateY(-5px) scale(1.08) !important;
            -moz-transform:translate(var(--tx,0px), var(--ty,0px)) translateY(-5px) scale(1.08) !important;
            -ms-transform:translate(var(--tx,0px), var(--ty,0px)) translateY(-5px) scale(1.08) !important;
            -o-transform:translate(var(--tx,0px), var(--ty,0px)) translateY(-5px) scale(1.08) !important;
    }
    .integration-card.center{
        transform:translate(-50%,-50%) scale(1) !important;
        -webkit-transform:translate(-50%,-50%) scale(1) !important;
        -moz-transform:translate(-50%,-50%) scale(1) !important;
        -ms-transform:translate(-50%,-50%) scale(1) !important;
        -o-transform:translate(-50%,-50%) scale(1) !important;
}
    .integration-card.center:hover{
        transform:translate(-50%,-50%) scale(1.08) !important;
    }

    .integration-card:nth-child(1){ --tx:-260px; --ty:-180px; }
    .integration-card:nth-child(2){ --tx:-340px; --ty:-42px; }
    .integration-card:nth-child(3){ --tx:-260px; --ty:110px; }
    .integration-card:nth-child(4){ --tx:130px;  --ty:-180px; }
    .integration-card:nth-child(6){ --tx:210px;  --ty:-42px; }
    .integration-card:nth-child(7){ --tx:130px;  --ty:110px; }
    .integration-card:nth-child(8){ --tx:-50px;  --ty:250px; }
    .integration-card:nth-child(9){ --tx:-50px;  --ty:-270px; }
}

/* Desktop layout with the wide --x offsets now only applies at 1300px and up,
   where there's actually enough room for it (520px offset + card + padding on each side) */
   

  /* ===================== MOBILE ===================== */
  @media (max-width:576px){
    .integration-section{ padding:40px 14px; }
    .integration-wrapper{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px 12px;
      height:auto;
      max-width:360px;
    }

    .integration-section h2{
      font-size:30px;
    }

    .integration-card{
      position:static;
      width:100%;
      height:auto;
      aspect-ratio:1/1;
      padding:10px;
      transform:translateY(18px) scale(1);
      transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
    }
    .integration-section.active .integration-card{ transform:translateY(0) scale(1); }
    .integration-card:hover{ transform:translateY(-3px) scale(1) !important; }

    .icon-badge{ width:40px; height:40px; }
    .icon-badge svg{ width:20px; height:20px; }
    .integration-card span.label{
      position:static;
      margin-top:8px;
      font-size:11px;
      text-align:center;
      white-space:normal;
      line-height:1.25;
    }

    .integration-card.center{
      grid-column:1 / -1;
      order:-1;
      width:118px;
      height:118px;
      margin:0 auto 6px;
    }
    .integration-card.center .hub-mark svg{ width:50px; height:50px; }
  }

  @media (prefers-reduced-motion: reduce){
    .integration-card, .integration-card.center::before, .integration-card.center .ring{
      transition:none !important; animation:none !important;
    }
    .integration-section .integration-card{ opacity:1 !important; }
  }
  .integration-card:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }