/* =========================================
   BE CONNECTED
========================================= */

/* =========================================
   HERO
========================================= */

.connected-hero{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(123,77,255,.18),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #09051f 0%,
      #12082f 35%,
      #24107a 70%,
      #4b1fff 100%
    );

  padding:180px 0 180px;
}

.connected-hero::after{

  content:"";

  position:absolute;

  left:-15%;
  bottom:-90px;

  width:130%;
  height:260px;

  background:#fff;

  border-radius:
    70% 30% 0 0 /
    100% 100% 0 0;

  transform:
    rotate(-3deg);

}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:90px;

  position:relative;
  z-index:2;
}

.hero-tag{
  display:inline-flex;

  padding:10px 18px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.16);

  color:#fff;

  font-size:.8rem;
  font-weight:700;

  letter-spacing:.12em;
}

.hero-copy h1{

  margin:25px 0;

  font-size:clamp(
    3.5rem,
    6vw,
    6rem
  );

  line-height:.95;

  color:#fff;

  font-weight:800;

}

.hero-copy h1 span{

  display:block;

  background:
    linear-gradient(
      90deg,
      #8B3FFC 0%,
      #6B63FF 45%,
      #39C8FF 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;

}

.hero-copy p{

  max-width:540px;

  color:rgba(
    255,
    255,
    255,
    .82
  );

  line-height:1.9;

  font-size:1.1rem;

  margin-bottom:50px;

}

.hero-visual{

  position:relative;

  height:620px;

}

.phone-mockup{

  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  width:620px;

  z-index:2;

}

.phone-mockup img{

  width:100%;
  height:auto;

  display:block;

}

.floating-card{

  position:absolute;

  padding:18px 24px;

  border-radius:22px;

  backdrop-filter:blur(20px);

  background:
    rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.14);

  color:#fff;

  font-weight:600;
}

.card-chat{

  top:130px;
  left:100px;

  z-index:10;

}

.card-goals{

  bottom:120px;
  left:140px;

  z-index:10;

}

.card-recognition{

  top:210px;
  right:40px;

  z-index:10;

}

.blob-1,
.blob-2{

  position:absolute;

  border-radius:50%;

  filter:blur(90px);
}

.blob-1{

  width:450px;
  height:450px;

  background:
    rgba(123,77,255,.25);

  right:-120px;
  top:-120px;

}

.blob-2{

  width:380px;
  height:380px;

  background:
    rgba(77,124,255,.18);

  left:-80px;
  bottom:-80px;

}

/* =========================================
   SECTIONS
========================================= */

.connected-features,
.connected-pillars,
.connected-partnership{

  padding:140px 0;

}

.section-heading{

  text-align:center;

  max-width:850px;

  margin:
    0 auto
    80px;

}

.section-heading span{

  color:#7b4dff;

  font-size:.8rem;

  letter-spacing:.15em;

  font-weight:800;

}

.section-heading h2{

  margin:20px 0;

  font-size:clamp(
    2.8rem,
    4vw,
    4.5rem
  );

  line-height:1.05;

}

.section-heading p{

  color:#64748b;

  line-height:1.9;

  max-width:700px;

  margin:auto;

}

/* =========================================
   FEATURES
========================================= */

.feature-grid{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:24px;

  margin-bottom:70px;

}

.feature-item{

  background:#fff;

  border-radius:30px;

  padding:40px 20px;

  text-align:center;

  box-shadow:
    0 20px 60px
    rgba(15,23,42,.06);

  transition:.35s;
}

.feature-item:hover{

  transform:
    translateY(-6px);

}

.feature-item i{

  font-size:2rem;

  margin-bottom:20px;

  color:#7b4dff;

}

.feature-item h3{

  font-size:1.05rem;

}

.dashboard-preview{

  border-radius:36px;

  overflow:hidden;

  box-shadow:
    0 30px 90px
    rgba(15,23,42,.08);

}

.dashboard-preview img{

  width:100%;

  display:block;

}

/* =========================================
   PILLARS
========================================= */

.connected-pillars{

  background:
    linear-gradient(
      180deg,
      #f8faff,
      #ffffff
    );

}

.pillars-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:30px;

}

.pillar-card{

  background:#fff;

  border-radius:34px;

  padding:50px;

  box-shadow:
    0 25px 70px
    rgba(15,23,42,.06);

}

.pillar-card span{

  color:#7b4dff;

  font-size:.8rem;

  font-weight:800;

  letter-spacing:.15em;

}

.pillar-card h3{

  margin:20px 0;

  font-size:2rem;

}

.pillar-card p{

  color:#64748b;

  line-height:1.8;

}

/* =========================================
   PARTNERSHIP
========================================= */

.partnership-grid{

  display:grid;

  grid-template-columns:
    1fr
    280px
    1fr;

  gap:80px;

  align-items:center;

}

.partner-side{

  display:flex;
  flex-direction:column;
  align-items:center;

}

/* =========================================
   LOGOS
========================================= */

.partner-logo{

  display:block;

}

/* CAJA DEL LOGO */

.partner-side{

  display:grid;

  grid-template-rows:
    120px
    auto;

  justify-items:center;

}

/* HUMAND */

.partner-side:first-child .partner-logo{

  width:280px;

  align-self:center;

}

/* BEU */

.beu-logo{

  width:220px;

  align-self:center;

}

/* =========================================
   COPY
========================================= */

.partner-side p{

  width:320px;

  color:#64748b;

  line-height:1.9;

  text-align:left;

  margin:0;

}

/* =========================================
   CENTER SHAPE
========================================= */

.partner-circle{

  width:240px;
  height:240px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:auto;

  background:
    linear-gradient(
      135deg,
      #4d7cff,
      #7b4dff
    );

  border-radius:
    58% 42% 61% 39% /
    39% 58% 42% 61%;

  animation:
    partnerBlob 10s ease-in-out infinite;

  box-shadow:
    0 30px 80px rgba(77,124,255,.22);

}

/* =========================================
   PLUS
========================================= */

.partner-circle span{

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;

  font-size:10rem;

  font-weight:900;

  color:#fff;

  line-height:1;

  transform:translateY(-24px);

}

/* =========================================
   BLOB ANIMATION
========================================= */

@keyframes partnerBlob{

  0%{
    border-radius:
      58% 42% 61% 39% /
      39% 58% 42% 61%;
  }

  50%{
    border-radius:
      44% 56% 37% 63% /
      63% 38% 62% 37%;
  }

  100%{
    border-radius:
      58% 42% 61% 39% /
      39% 58% 42% 61%;
  }

}

/* =========================================
   CTA
========================================= */

.connected-cta{

  padding:80px 0 100px;

}

.connected-cta .container{

  background:
    linear-gradient(
      135deg,
      #09051f 0%,
      #24107a 50%,
      #4b1fff 100%
    );

  border-radius:40px;

  padding:65px 50px;

  text-align:center;

  position:relative;

  overflow:hidden;

}

.connected-cta h2{

  color:#fff;

  font-size:clamp(
    2rem,
    3vw,
    3.2rem
  );

  line-height:1.05;

  margin-bottom:14px;

}

.connected-cta p{

  max-width:580px;

  margin:0 auto 28px;

  color:rgba(255,255,255,.82);

  font-size:1rem;

  line-height:1.7;

}

.connected-cta .btn-primary{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:auto;

  padding:14px 30px;

  border-radius:14px;

  font-size:.95rem;
  font-weight:700;

}

/* =========================================
   CTA MOBILE
========================================= */

@media (max-width:768px){

  .connected-cta{

    padding:60px 0 80px;

  }

  .connected-cta .container{

    padding:40px 24px;

    border-radius:28px;

  }

  .connected-cta h2{

    font-size:2rem;

    margin-bottom:16px;

  }

  .connected-cta p{

    font-size:1rem;

    margin-bottom:28px;

  }

  .connected-cta .btn-primary{

    width:100%;

    padding:16px 24px;

    font-size:1rem;

    border-radius:16px;

  }

}

/* =========================================
   HERO BUTTONS
========================================= */

.connected-hero .btn-link{

  color:#fff;

  border:1px solid rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.08);

}

.connected-hero .btn-link:hover{

  background:
    rgba(255,255,255,.16);

}
/* =========================================
   CONNECTED MOBILE
========================================= */
@media (max-width:768px){
/* HERO */

.connected-hero{

  padding:120px 0 80px;

}

.connected-hero::after{

  height:120px;

  bottom:-60px;

}

.hero-grid{

  grid-template-columns:1fr;

  gap:20px;

}

.hero-copy{

  text-align:left;

}

.hero-copy h1{

  font-size:3rem;

  line-height:.95;

  margin-bottom:20px;

}

.hero-copy p{

  font-size:1rem;

  line-height:1.7;

  margin-bottom:24px;

}

.hero-buttons{

  display:grid;

  grid-template-columns:1fr;

  gap:12px;

}

.hero-buttons a{

  width:100%;

  justify-content:center;

}

.hero-visual{

  display:none;

}

/* SECCIONES */

.connected-features,
.connected-pillars,
.connected-partnership{

  padding:60px 0;

}

.section-heading{

  margin-bottom:35px;

}

.section-heading h2{

  font-size:2.2rem;

  line-height:1.05;

}

.section-heading p{

  font-size:1rem;

}

/* FEATURES */

.feature-grid{

  grid-template-columns:1fr 1fr;

  gap:12px;

  margin-bottom:24px;

}

.feature-item{

  padding:20px 12px;

  border-radius:20px;

}

.feature-item i{

  font-size:1.4rem;

  margin-bottom:10px;

}

.feature-item h3{

  font-size:.95rem;

  line-height:1.2;

}

/* PILLARS */

.pillars-grid{

  grid-template-columns:1fr;

  gap:16px;

}

.pillar-card{

  padding:24px;

  border-radius:24px;

}

.pillar-card h3{

  font-size:1.5rem;

}

/* PARTNERSHIP */

.partnership-grid{

  grid-template-columns:1fr;

  gap:30px;

}

.partner-side{

  display:flex;

  flex-direction:column;

  align-items:center;

}

.partner-side p{

  width:100%;

  text-align:center;

}

.partner-logo{

  max-width:220px;

}

.beu-logo{

  max-width:180px;

}

.partner-circle{

  width:120px;

  height:120px;

}

.partner-circle span{

  font-size:5rem;

  transform:none;

}

/* CTA */

.connected-cta{

  padding:40px 0 60px;

}

.connected-cta .container{

  padding:32px 24px;

  border-radius:32px;

}

.connected-cta h2{

  font-size:2rem;

  line-height:1.05;

}

.connected-cta p{

  font-size:1rem;

  line-height:1.7;

}
}