/* =========================================================
   PREMIUM THEME
   FOOTER
========================================================= */


/* =========================================================
   FOOTER CONTAINER
========================================================= */

.premium-site-footer{
  position:relative;

  margin-top:64px;
  padding:62px 0 34px;

  overflow:hidden;

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

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(37,99,235,.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(6,182,212,.24),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #07111f 0%,
      #0b1220 48%,
      #020617 100%
    );

  border-top:1px solid rgba(125,211,252,.22);
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.premium-site-footer::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(125,211,252,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(125,211,252,.055) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      transparent 82%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      transparent 82%
    );
}

.premium-site-footer::after{
  content:"";

  position:absolute;
  top:0;
  right:7%;
  left:7%;

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34,211,238,.95),
      rgba(37,99,235,.75),
      transparent
    );

  box-shadow:
    0 0 30px rgba(34,211,238,.65);
}

.premium-site-footer > .container{
  position:relative;
  z-index:2;
}


/* =========================================================
   FOOTER GRID
========================================================= */

.premium-footer-grid{
  display:grid;
  align-items:stretch;
  gap:20px;

  min-width:0;
}

.premium-footer-grid.cols-1{
  grid-template-columns:1fr;
}

.premium-footer-grid.cols-2{
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.premium-footer-grid.cols-3{
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


/* =========================================================
   FOOTER CARD
========================================================= */

.premium-footer-card{
  position:relative;

  isolation:isolate;

  width:auto;
  min-width:0;
  max-width:none;
  min-height:180px;

  padding:24px;

  overflow:hidden;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.045)
    ),
    radial-gradient(
      circle at top left,
      rgba(34,211,238,.12),
      transparent 38%
    );

  box-shadow:
    0 24px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  animation:
    premiumFooterGlow 7s ease-in-out infinite;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.premium-footer-card:nth-child(2){
  animation-delay:1.4s;
}

.premium-footer-card:nth-child(3){
  animation-delay:2.8s;
}

.premium-footer-card::after{
  content:"";

  position:absolute;
  top:-80px;
  left:-80px;
  z-index:-1;

  width:180px;
  height:180px;

  pointer-events:none;

  opacity:.65;

  background:
    radial-gradient(
      circle,
      rgba(34,211,238,.14),
      transparent 64%
    );
}


/* =========================================================
   CARD STATES
========================================================= */

.premium-footer-card:hover{
  transform:translateY(-5px);

  border-color:rgba(34,211,238,.34);

  box-shadow:
    0 32px 78px rgba(0,0,0,.38),
    0 0 34px rgba(34,211,238,.14),
    inset 0 1px 0 rgba(255,255,255,.15);
}


/* =========================================================
   FOOTER TITLE
========================================================= */

.premium-footer-title,
.premium-footer-card .site-footer-title{
  display:flex;
  align-items:center;
  gap:9px;

  margin:0 0 16px;

  color:#e0fbff;

  font-size:13px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.premium-footer-title::before,
.premium-footer-card .site-footer-title::before{
  content:"";

  width:9px;
  height:9px;
  flex:0 0 9px;

  border-radius:999px;

  background:#22d3ee;

  box-shadow:
    0 0 18px rgba(34,211,238,.95);
}


/* =========================================================
   FOOTER CONTENT
========================================================= */

.premium-footer-html,
.premium-footer-card .site-footer-html{
  color:rgba(255,255,255,.74);

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

.premium-footer-html > *:first-child,
.premium-footer-card .site-footer-html > *:first-child{
  margin-top:0;
}

.premium-footer-html > *:last-child,
.premium-footer-card .site-footer-html > *:last-child{
  margin-bottom:0;
}

.premium-footer-html p,
.premium-footer-card .site-footer-html p{
  margin:0 0 10px;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.premium-footer-html a,
.premium-footer-card .site-footer-html a{
  color:#a5f3fc;

  font-weight:750;

  text-decoration:none;

  border-bottom:
    1px solid rgba(165,243,252,.25);

  transition:
    color .18s ease,
    border-color .18s ease;
}

.premium-footer-html a:hover,
.premium-footer-card .site-footer-html a:hover{
  color:#fff;

  border-color:rgba(255,255,255,.65);
}

.premium-footer-html a:focus-visible,
.premium-footer-card .site-footer-html a:focus-visible{
  outline:2px solid #22d3ee;
  outline-offset:3px;
}


/* =========================================================
   FOOTER LISTS
========================================================= */

.premium-footer-html ul,
.premium-footer-card .site-footer-html ul{
  display:grid;
  gap:9px;

  margin:0;
  padding-left:0;

  list-style:none;
}

.premium-footer-html li,
.premium-footer-card .site-footer-html li{
  position:relative;

  padding-left:18px;
}

.premium-footer-html li::before,
.premium-footer-card .site-footer-html li::before{
  content:"›";

  position:absolute;
  top:-1px;
  left:0;

  color:#22d3ee;

  font-weight:900;
}


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

.premium-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;

  margin-top:26px;
  padding:18px 4px 0;

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

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

  font-size:13px;
  line-height:1.5;
}

.premium-footer-bottom-right{
  color:rgba(165,243,252,.80);
}


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

@keyframes premiumFooterGlow{

  0%,
  100%{
    box-shadow:
      0 24px 60px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.12);
  }

  50%{
    box-shadow:
      0 28px 72px rgba(0,0,0,.34),
      0 0 30px rgba(34,211,238,.11),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:900px){

  .premium-footer-grid,
  .premium-footer-grid.cols-1,
  .premium-footer-grid.cols-2,
  .premium-footer-grid.cols-3{
    grid-template-columns:1fr;
  }

  .premium-site-footer{
    margin-top:48px;
    padding-top:44px;
  }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:640px){

  .premium-site-footer{
    margin-top:40px;
    padding:38px 0 26px;
  }

  .premium-footer-grid{
    gap:16px;
  }

  .premium-footer-card{
    min-height:0;
    padding:20px;

    border-radius:22px;
  }

  .premium-footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;

    margin-top:22px;
    padding-top:16px;
  }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width:480px){

  .premium-footer-card{
    padding:18px;

    border-radius:20px;
  }

  .premium-footer-title,
  .premium-footer-card .site-footer-title{
    font-size:12px;
  }

  .premium-footer-html,
  .premium-footer-card .site-footer-html{
    font-size:13px;
  }

  .premium-footer-bottom{
    padding-right:0;
    padding-left:0;

    font-size:12px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .premium-footer-card{
    animation:none;
    transition:none;
  }

  .premium-footer-card:hover{
    transform:none;
  }
}