/* XIRO FOOTER
   Split from the user's final supplied footer.
   Visual values are preserved; selectors are scoped under .xf only to avoid collisions.
*/

.xf{
  --ink:#111;
  --muted:#111a;
  --paper:#f7f7f2f7;
  --line:#1112;
  --pad:clamp(14px,2vw,28px);

  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(118px,15vh,182px) var(--pad) var(--pad);
  background:
    radial-gradient(circle at 14% 18%,#69aae1e0 0%,#69aae100 30%),
    radial-gradient(circle at 88% 10%,#41c6c6eb 0%,#41c6c600 28%),
    radial-gradient(circle at 90% 68%,#ff675ceb 0%,#ff675c00 34%),
    radial-gradient(circle at 45% 95%,#f3aa87e0 0%,#f3aa8700 42%),
    linear-gradient(135deg,#66839d,#c6b596 46%,#ef7767);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}

.xf,
.xf *{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

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

.xf button,
.xf input{
  font:inherit;
  color:inherit;
}

.xf:before,
.xf:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:42vw;
  height:42vw;
  min-width:320px;
  min-height:320px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.36;
  animation:drift 14s ease-in-out infinite alternate;
}

.xf:before{
  left:-14vw;
  bottom:-14vw;
  background:#ff9877db;
}

.xf:after{
  right:-14vw;
  top:4vw;
  background:#ff4e5499;
  animation-delay:-4s;
}

@keyframes drift{
  to{
    transform:translate3d(5%,4%,0) scale(1.05);
  }
}

.xf .panel{
  display:grid;
  grid-template-columns:.9fr .8fr 1.35fr;
  gap:clamp(34px,4vw,70px);
  min-height:clamp(470px,62vh,620px);
  padding:clamp(30px,4vw,54px);
  background:var(--paper);
  border:1px solid #ffffff73;
  border-radius:8px;
  box-shadow:0 18px 60px #0f161e14;
  backdrop-filter:blur(12px);
}

.xf .stack,
.xf .news{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
}

.xf .tag{
  font-size:clamp(22px,2.3vw,34px);
  line-height:1.05;
  letter-spacing:-.05em;
}

.xf .label{
  margin-bottom:12px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}

.xf .list{
  display:grid;
  gap:9px;
  list-style:none;
  font-size:clamp(18px,1.85vw,24px);
  line-height:1.2;
  letter-spacing:-.03em;
}

.xf .contact{
  display:grid;
  gap:28px;
}

.xf .item{
  display:grid;
  gap:8px;
}

.xf .link{
  position:relative;
  width:max-content;
  max-width:100%;
  font-size:clamp(18px,1.75vw,23px);
  line-height:1.2;
  letter-spacing:-.03em;
}

.xf .link:after,
.xf .list a:after,
.xf .mini:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:.22s;
}

.xf .link:hover:after,
.xf .list a:hover:after,
.xf .mini:hover:after{
  transform:scaleX(1);
  transform-origin:left;
}

.xf .list a,
.xf .mini{
  position:relative;
  display:inline-block;
  width:max-content;
  max-width:100%;
}

.xf .news{
  gap:36px;
  padding-top:60px;
}

.xf .headline{
  max-width:540px;
  font-size:clamp(46px,6vw,78px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.075em;
}

.xf .sub{
  max-width:560px;
  margin-top:12px;
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
}

.xf .form{
  width:min(100%,560px);
}

.xf .field{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:74px;
  padding:0 16px 0 24px;
  border-radius:22px;
  background:#ececf4;
}

.xf .input{
  width:100%;
  height:58px;
  border:0;
  outline:0;
  background:transparent;
  font-size:17px;
}

.xf .input::placeholder{
  color:#1115;
}

.xf .send{
  display:grid;
  width:46px;
  height:46px;
  flex:0 0 auto;
  place-items:center;
  border:0;
  border-radius:50%;
  background:none;
  cursor:pointer;
  transition:.22s;
}

.xf .send:hover{
  transform:translateX(4px);
  background:#1111110d;
}

.xf .send svg{
  width:26px;
  height:26px;
}

.xf .bottom{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:end;
  margin-top:clamp(16px,3vw,26px);
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:#111d;
}

.xf .domains{
  display:flex;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  text-align:center;
}

.xf .built{
  justify-self:end;
  text-align:right;
}

.xf .ground{
  min-height:clamp(280px,36vh,380px);
}

@media(max-width:1100px){
  .xf .panel{
    grid-template-columns:1fr 1fr;
  }

  .xf .news{
    grid-column:1/-1;
    padding-top:28px;
  }

  .xf .headline{
    max-width:740px;
  }
}

@media(max-width:760px){
  .xf{
    padding-top:clamp(86px,12vh,118px);
  }

  .xf .panel{
    grid-template-columns:1fr;
    gap:34px;
    min-height:auto;
    padding:24px 20px;
  }

  .xf .news{
    padding-top:8px;
  }

  .xf .headline{
    font-size:clamp(38px,12vw,56px);
  }

  .xf .field{
    min-height:66px;
    padding-left:18px;
    border-radius:18px;
  }

  .xf .bottom{
    grid-template-columns:1fr;
    align-items:start;
  }

  .xf .domains{
    justify-content:flex-start;
    text-align:left;
  }

  .xf .built{
    justify-self:start;
    text-align:left;
  }

  .xf .ground{
    min-height:260px;
  }
}

@media(max-width:420px){
  .xf .panel{
    padding:22px 16px;
    gap:30px;
  }

  .xf .tag{
    font-size:28px;
  }

  .xf .headline{
    font-size:clamp(36px,11vw,48px);
  }

  .xf .bottom{
    gap:12px;
  }

  .xf .domains{
    display:grid;
    gap:8px;
  }

  .xf .dot{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .xf,
  .xf *,
  .xf:before,
  .xf:after{
    animation:none!important;
    transition:none!important;
  }
}


/* V19 — full-length footer panel */
.xf .panel{
  width:calc(100% + (var(--pad) * 2));
  margin-left:calc(var(--pad) * -1);
  margin-right:calc(var(--pad) * -1);
}


/* V20 — move only the white/glass footer panel further down */
.xf .panel{
  margin-top:clamp(54px,8vh,96px);
}

@media(max-width:760px){
  .xf .panel{
    margin-top:clamp(34px,6vh,58px);
  }
}


/* =========================================================
   V21 — FOOTER COMPOSITION MATCHING THE PROVIDED SCREENSHOT
   Keeps the supplied footer design/content, changes only proportions.
   ========================================================= */

.xf{
  min-height:100svh;
  padding:
    clamp(70px,8.5vh,86px)
    clamp(14px,1vw,18px)
    0;
}

/* White/glass panel: almost full viewport width with small side margins. */
.xf .panel{
  width:100%;
  margin:0;
  min-height:clamp(390px,43vh,430px);
  padding:clamp(32px,2.8vw,42px);
  gap:clamp(36px,4vw,68px);
  border-radius:6px;
}

/* Keep left/footer stacks stretched from top to bottom like the reference. */
.xf .stack,
.xf .news{
  min-height:100%;
}

/* Newsletter sits slightly lower inside the panel, like the screenshot. */
.xf .news{
  padding-top:clamp(42px,5vh,54px);
}

/* Preserve a large colorful ground below the panel. */
.xf .ground{
  min-height:clamp(390px,48vh,520px);
}

/* Tablet proportions */
@media(max-width:1100px){
  .xf{
    padding-top:clamp(62px,8vh,78px);
  }

  .xf .panel{
    min-height:auto;
  }

  .xf .news{
    padding-top:28px;
  }

  .xf .ground{
    min-height:clamp(300px,40vh,420px);
  }
}

/* Mobile: same visual idea, but stacked naturally. */
@media(max-width:760px){
  .xf{
    padding:
      clamp(58px,8vh,76px)
      clamp(10px,3vw,14px)
      0;
  }

  .xf .panel{
    width:100%;
    margin:0;
    padding:24px 20px;
    min-height:auto;
    border-radius:6px;
  }

  .xf .news{
    padding-top:8px;
  }

  .xf .ground{
    min-height:clamp(220px,32vh,320px);
  }
}

@media(max-width:420px){
  .xf{
    padding-left:8px;
    padding-right:8px;
  }

  .xf .panel{
    padding:22px 16px;
  }
}


/* V22 — add one more equal top gap before the white/glass panel */
.xf{
  padding-top:clamp(140px,17vh,172px);
}

@media(max-width:1100px){
  .xf{
    padding-top:clamp(124px,16vh,156px);
  }
}

@media(max-width:760px){
  .xf{
    padding-top:clamp(116px,16vh,152px);
  }
}


/* V23 — add the same top gap once more */
.xf{
  padding-top:clamp(210px,25.5vh,258px);
}

@media(max-width:1100px){
  .xf{
    padding-top:clamp(186px,24vh,234px);
  }
}

@media(max-width:760px){
  .xf{
    padding-top:clamp(174px,24vh,228px);
  }
}


/* ============================================================
   v52.2 — FOOTER WHITE PANEL TO BOTTOM
   Only extends the existing white footer panel to the bottom.
   No content/design/animation changes.
   ============================================================ */

.xf{
  padding-bottom:0 !important;
}

/* Make the existing white panel fill the remaining footer viewport. */
.xf .panel{
  min-height:calc(100svh - clamp(210px,25.5vh,258px)) !important;
}

/* Remove the extra coloured ground below the white panel. */
.xf .ground{
  display:none !important;
  min-height:0 !important;
}

@media(max-width:1100px){
  .xf .panel{
    min-height:calc(100svh - clamp(186px,24vh,234px)) !important;
  }
}

@media(max-width:760px){
  .xf .panel{
    min-height:calc(100svh - clamp(174px,24vh,228px)) !important;
  }
}


/* ============================================================
   v52.3 — SMALL BOTTOM GAP UNDER WHITE FOOTER
   Only lifts the existing white footer panel slightly upward.
   ============================================================ */

.xf{
  --footer-bottom-gap:clamp(18px,2vh,28px);
}

.xf .panel{
  min-height:calc(
    100svh - clamp(210px,25.5vh,258px) - var(--footer-bottom-gap)
  ) !important;
}

/* Restore only a thin coloured strip under the white panel. */
.xf .ground{
  display:block !important;
  min-height:var(--footer-bottom-gap) !important;
  height:var(--footer-bottom-gap) !important;
}

@media(max-width:1100px){
  .xf .panel{
    min-height:calc(
      100svh - clamp(186px,24vh,234px) - var(--footer-bottom-gap)
    ) !important;
  }
}

@media(max-width:760px){
  .xf{
    --footer-bottom-gap:18px;
  }

  .xf .panel{
    min-height:calc(
      100svh - clamp(174px,24vh,228px) - var(--footer-bottom-gap)
    ) !important;
  }
}