/* ==========================================================
   RETACH FOOTER V3
   Single visual owner.
   No dependency on legacy .footer selectors.
   ========================================================== */

.rtf3,
.rtf3 *{
  box-sizing:border-box;
}


.rtf3{
  --rtf3-bg:#101126;
  --rtf3-bg-soft:#161833;

  --rtf3-text:#f7f7fb;
  --rtf3-muted:#a9adc1;

  --rtf3-purple:#806cf5;
  --rtf3-purple-2:#a891ff;

  position:relative;
  z-index:1;

  left:50%;

  width:100vw;

  margin-left:-50vw;

  overflow:hidden;

  color:var(--rtf3-text);

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(132,106,247,.17),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 24%,
      rgba(206,164,255,.11),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #121329 0%,
      #0c0d1d 100%
    );

  font-family:
    Inter,
    Arial,
    sans-serif;
}


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


.rtf3 button{
  font:inherit;
}


.rtf3__inner{
  position:relative;
  z-index:2;

  width:min(
    1440px,
    calc(100% - 64px)
  );

  margin:0 auto;

  padding:
    48px
    0
    27px;
}


/* AMBIENT */

.rtf3__ambient{
  position:absolute;

  pointer-events:none;

  border-radius:999px;

  filter:blur(55px);

  opacity:.48;
}


.rtf3__ambient--one{
  left:-110px;
  top:300px;

  width:300px;
  height:300px;

  background:
    rgba(108,82,235,.22);
}


.rtf3__ambient--two{
  right:-130px;
  bottom:80px;

  width:330px;
  height:330px;

  background:
    rgba(178,137,245,.15);
}


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

.rtf3-cta{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(330px,.75fr);

  min-height:310px;

  overflow:hidden;

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

  border-radius:32px;

  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(143,112,246,.18),
      transparent 34%
    ),
    linear-gradient(
      125deg,
      #fbfaf8,
      #f4f0ff 53%,
      #ece8ff
    );

  box-shadow:
    0 28px 90px
    rgba(1,3,24,.24),
    inset 0 1px 0
    rgba(255,255,255,.94);
}


.rtf3-cta__copy{
  position:relative;
  z-index:3;

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

  justify-content:center;

  padding:
    43px
    30px
    43px
    48px;
}


.rtf3-cta__eyebrow{
  margin-bottom:18px;

  color:#7461df;

  font-size:11px;
  line-height:1;

  font-weight:780;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.rtf3-cta__title{
  max-width:760px;

  margin:0;

  color:#191a36;

  font-size:
    clamp(
      35px,
      4vw,
      59px
    );

  line-height:.98;

  font-weight:720;

  letter-spacing:-.045em;
}


.rtf3-cta__text{
  max-width:690px;

  margin:
    21px
    0
    0;

  color:#676a80;

  font-size:16px;
  line-height:1.55;
}


.rtf3-cta__button{
  display:inline-flex;

  align-items:center;
  justify-content:cente

  gap:18px;

  min-height:55px;

  margin-top:28px;

  padding:
    0
    18px
    0
    23px;

  border:0;

  border-radius:16px;

  background:#181a36;

  color:white;

  font-size:14px;
  line-height:1;

  font-weight:720;

  cursor:pointer;

  box-shadow:
    0 14px 34px
    rgba(37,31,84,.18);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.rtf3-cta__button:hover{
  transform:translateY(-2px);

  background:#7060e7;

  box-shadow:
    0 19px 42px
    rgba(69,51,163,.25);
}


.rtf3-cta__button svg{
  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* CTA VISUAL */

.rtf3-cta__visual{
  position:relative;

  min-height:310px;

  isolation:isolate;
}


.rtf3-cta__visual::before{
  content:"";

  position:absolute;

  inset:
    15%
    5%
    8%
    3%;

  border:
    1px solid
    rgba(120,93,225,.13);

  border-radius:
    48%
    52%
    44%
    56%;

  transform:rotate(-7deg);

  background:
    rgba(255,255,255,.24);
}


.rtf3-cta__orb{
  position:absolute;

  z-index:-1;

  left:50%;
  top:50%;

  width:68%;
  aspect-ratio:1;

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

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(154,126,247,.25),
      rgba(154,126,247,.03) 60%,
      transparent 72%
    );

  filter:blur(3px);
}


.rtf3-cta__visual img{
  position:absolute;

  z-index:2;

  left:50%;
  top:50%;

  width:min(
    350px,
    88%
  );

  height:auto;

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

  filter:
    drop-shadow(
      0 30px 30px
      rgba(78,54,143,.20)
    );
}


.rtf3-cta__tag{
  position:absolute;

  z-index:4;

  display:flex;

  align-items:center;

  min-height:31px;

  padding:0 11px;

  border:
    1px solid
    rgba(108,84,213,.15);

  border-radius:999px;

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

  color:#6355bd;

  font-size:10px;
  line-height:1;

  font-weight:700;

  letter-spacing:.025em;

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 30px
    rgba(74,59,136,.08);
}


.rtf3-cta__tag--one{
  left:5%;
  top:22%;
}


.rtf3-cta__tag--two{
  right:6%;
  top:38%;
}


.rtf3-cta__tag--three{
  left:12%;
  bottom:19%;
}


/* ==========================================================
   MAIN
   ========================================================== */

.rtf3-main{
  display:grid;

  grid-template-columns:minmax(245px,.82fr) minmax(0,3.18fr);

  gap:clamp(42px,5vw,78px);

  padding:
    62px
    8px
    48px;
}


/* BRAND */

.rtf3-brand__name{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
}

.rtf3-brand__logo{
  display:block;
  width:154px;
  height:auto;
  max-width:100%;
  object-fit:contain;
}



.rtf3-brand__lead{
  max-width:310px;

  margin:
    20px
    0
    0;

  color:#aeb2c6;

  font-size:15px;
  line-height:1.52;
}


.rtf3-brand__contacts{
  display:grid;

  gap:7px;

  margin-top:26px;
}


.rtf3-brand__contacts a{
  width:max-content;

  max-width:100%;

  color:#f5f5fa;

  font-size:15px;
  line-height:1.35;

  font-weight:620;
}


.rtf3-brand__contacts a:hover{
  color:#ad98ff;
}


/* SOCIAL */

.rtf3-socials{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-top:25px;
}


.rtf3-socials a{
  display:inline-flex;

  align-items:center;

  gap:7px;

  min-height:34px;

  padding:
    0
    11px;

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

  border-radius:10px;

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

  color:#c9cada;

  font-size:11px;

  font-weight:650;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}


.rtf3-socials a:hover{
  border-color:
    rgba(153,125,255,.36);

  background:
    rgba(139,108,247,.10);

  color:white;
}


.rtf3-socials span{
  color:#8f7cf1;

  font-size:13px;
}


/* ==========================================================
   NAV
   ========================================================== */

.rtf3-nav{
  display:grid;

  grid-template-columns:repeat(6,minmax(0,1fr));

  gap:22px clamp(16px,1.8vw,28px);
}


.rtf3-nav__head{
  display:flex;

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

  width:100%;

  padding:0;

  border:0;

  background:none;

  color:#f7f7fb;

  text-align:left;

  font-size:12px;
  line-height:1;

  font-weight:760;

  letter-spacing:.065em;

  text-transform:uppercase;

  cursor:default;
}


.rtf3-nav__head svg{
  display:none;

  width:19px;
  height:19px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.rtf3-nav__body{
  display:grid;

  gap:10px;

  margin-top:17px;
}


.rtf3-nav__body a{
  width:max-content;

  max-width:100%;

  color:#aeb1c2;

  font-size:13px;
  line-height:1.35;

  transition:
    color .18s ease,
    transform .18s ease;
}


.rtf3-nav__body a:hover{
  color:white;

  transform:translateX(2px);
}


/* ==========================================================
   BOTTOM
   ========================================================== */

.rtf3-bottom{
  display:grid;

  grid-template-columns:
    minmax(0,1.25fr)
    auto
    auto;

  align-items:center;

  gap:
    18px
    32px;

  padding:
    23px
    8px
    0;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  color:#777b91;

  font-size:10px;
  line-height:1.45;
}


.rtf3-company{
  display:flex;

  flex-wrap:wrap;

  gap:
    4px
    18px;
}


.rtf3-legal{
  display:flex;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:
    5px
    15px;
}


.rtf3-legal a{
  color:#898da2;
}


.rtf3-legal a:hover{
  color:#c8badf;
}


.rtf3-copy{
  white-space:nowrap;

  color:#9295aa;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1080px){

  .rtf3__inner{
    width:
      min(
        100% - 36px,
        960px
      );
  }


  .rtf3-cta{
    grid-template-columns:
      1.25fr
      .75fr;
  }


  .rtf3-cta__copy{
    padding-left:34px;
  }


  .rtf3-main{
    grid-template-columns:
      1fr;

    gap:42px;
  }


  .rtf3-nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }


  .rtf3-bottom{
    grid-template-columns:
      1fr;

    align-items:start;
  }


  .rtf3-legal{
    justify-content:flex-start;
  }

}


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

@media (max-width:760px){

  .rtf3__inner{
    width:
      min(
        100% - 24px,
        620px
      );

    padding:
      18px
      0
      88px;
  }


  .rtf3-cta{
    display:block;

    min-height:0;

    border-radius:23px;
  }


  .rtf3-cta__copy{
    padding:
      26px
      21px
      22px;
  }


  .rtf3-cta__eyebrow{
    margin-bottom:13px;

    font-size:9px;
  }


  .rtf3-cta__title{
    max-width:390px;

    font-size
      clamp(
        32px,
        10vw,
        44px
      );

    line-height:1;
  }


  .rtf3-cta__text{
    margin-top:15px;

    font-size:14px;
    line-height:1.48;
  }


  .rtf3-cta__button{
    width:100%;

    min-height:51px;

    margin-top:20px;

    border-radius:14px;
  }


  .rtf3-cta__visual{
    min-height:205px;
  }


  .rtf3-cta__visual img{
    width:
      min(
        250px,
        70vw
      );
  }


  .rtf3-cta__tag{
    min-height:26px;

    padding:
      0
      9px;

    font-size:9px;
  }


  .rtf3-main{
    display:block;

    padding:
      39px
      3px
      30px;
  }


  .rtf3-brand{
    padding-bottom:32px;
  }


  .rtf3-brand__name{
    font-size:30px;
  }


  .rtf3-brand__lead{
    margin-top:15px;
  }


  .rtf3-brand__contacts{
    margin-top:21px;
  }


  .rtf3-socials{
    margin-top:20px;
  }


  /* MOBILE ACCORDIONS */

  .rtf3-nav{
    display:grid;

    grid-template-columns:1fr;

    gap:5px;

    padding-top:5px;

    border-top:
      1px solid
      rgba(255,255,255,.08);
  }


  .rtf3-nav__section{
    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .rtf3-nav__head{
    min-height:49px;

    cursor:pointer;

    font-size:12px;

    letter-spacing:.045em;
  }


  .rtf3-nav__head svg{
    display:block;

    transition:
      transform .2s ease;
  }


  .rtf3-nav__section.is-open
  .rtf3-nav__head svg{
    transform:rotate(180deg);
  }


  .rtf3-nav__body{
    display:none;

    gap:10px;

    margin:
      0
      0
      17px;

    padding:
      0
      4px;
  }


  .rtf3-nav__section.is-open
  .rtf3-nav__body{
    display:grid;
  }


  .rtf3-nav__body a{
    font-size:13px;
  }


  .rtf3-bottom{
    gap:17px;

    padding:
      23px
      3px
      0;

    font-size:10px;
  }


  .rtf3-company{
    display:grid;

    gap:3px;
  }


  .rtf3-legal{
    display:grid;

    gap:6px;
  }

}


/* ==========================================================
   VERY SMALL
   ========================================================== */

@media (max-width:430px){

  .rtf3-cta__tag--one{
    left:4%;
  }


  .rtf3-cta__tag--two{
    right:3%;
  }


  .rtf3-cta__tag--three{
    left:7%;
  }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion:reduce){

  .rtf3 *,
  .rtf3 *::before,
  .rtf3 *::after{
    scroll-behavior:auto !important;

    transition:none !important;
  }

}
