*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
}

html{
  scroll-behavior:smooth;
  background:#050505;
}

body{
  background:#000;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
}




/* NAVBAR */

.navbar{

/* floating layout */
width: calc(100% - 80px);
max-width: 1400px;
margin: 20px 40px 0 40px;
transform-origin: left center;

/* spacing */
padding: 18px 40px;

/* floating effect */
position: sticky;
overflow: visible; /* keeps mega menu working */
top: 20px;

/* style */
background: rgba(0,0,0,.85);
backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255,255,255,.08);

/* premium depth */
box-shadow:
0 12px 30px rgba(0,0,0,.35),
0 2px 6px rgba(0,0,0,.25);


transition:
    width 1.05s cubic-bezier(.16, 1, .3, 1),
    max-width 1.05s cubic-bezier(.16, 1, .3, 1),
    padding 1.05s cubic-bezier(.16, 1, .3, 1),
    margin 1.05s cubic-bezier(.16, 1, .3, 1),
    border-radius 1.05s cubic-bezier(.16, 1, .3, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    box-shadow 1.05s cubic-bezier(.16, 1, .3, 1);



/* keep behavior */
color:#fff;
z-index:1000;
}



/* NAV CONTENT ANIMATION */

.nav-container {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}


.nav-actions {
  opacity: 1;
  visibility: visible;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
  transform: translateY(0) scale(1);
  transition:
    opacity .65s ease,
    transform .85s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 0s;
  transform-origin: center;
}



.nav-center {
  position: absolute;
  left: 50%;

  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);

  transition:
    opacity .65s ease .25s,
    transform .85s cubic-bezier(.16, 1, .3, 1) .2s,
    visibility 0s linear 0s;

  transform-origin: center;
}


.nav-links{
display:flex;
gap:40px;
list-style:none;
align-items:center;
}


.nav-item{
cursor:pointer;
font-weight:500;
font-size:15px;
letter-spacing:.03em;
padding:10px 0;
text-transform:uppercase;
}

.nav-item[data-menu="products"].active ~ .mega-menu::after{
left:40%;
}

.nav-item[data-menu="solutions"].active ~ .mega-menu::after{
left:50%;
}

.nav-item[data-menu="resources"].active ~ .mega-menu::after{
left:60%;
}


/* NAVBAR TOGGLE BUTTON */


.nav-toggle{

width:26px;
height:26px;

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

background:rgba(255,255,255,.08);
border:none;
border-radius:6px;

color:white;
font-size:14px;

cursor:pointer;

margin-right:10px;

transition:.25s;
}

.nav-toggle:hover{
background:rgba(255,255,255,.16);
}


.nav-arrow{
display:inline-block;
margin-left:6px;
width:8px;
height:8px;
border-right:2px solid white;
border-bottom:2px solid white;
transform:rotate(45deg);
transition:transform .25s ease;
position:relative;
top:-2px;
}

.nav-item.active .nav-arrow{
transform:rotate(-135deg);
}



/* COLLAPSED NAVBAR */


.navbar.collapsed {
  height: 106px;
  width: auto;
  max-width: 350px;

  margin: 20px 0 0 40px;
  padding: 18px 40px;

  display: flex;
  overflow: hidden;

  transform: none;
  transform-origin: left center;
}


/* collapsed state */


.navbar.collapsed .nav-toggle{

transform:rotate(180deg);
}



/* shrink logo */

.navbar.collapsed .brand-logo{
height:64px;
}

.navbar.collapsed .brand-text{
font-size:22px;
}



/* prevent collapsed state from re-centering navbar contents */
.navbar.collapsed .nav-container {
  width: 100%;
  max-width: none;
  margin: 0;
}


.navbar.collapsed.active{
opacity:1;
transform:scale(1);
}

/* PREMIUM SLOW NAV COLLAPSE / OPEN */


.navbar.collapsed .nav-center {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px) scale(.94);
  pointer-events: none;

  transition:
    opacity .35s ease,
    transform .55s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .55s;
}

.navbar.collapsed .nav-actions {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.94);
  pointer-events: none;

  transition:
    opacity .35s ease,
    transform .55s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .55s;
}


.navbar-shimmer {
  position: absolute;
  inset: 0;

  border-radius: inherit;
  overflow: hidden;

  pointer-events: none;
  z-index: 1;
}

.navbar-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  

  width: 100vw;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 46%,
    rgba(255,255,255,.055) 50%,
    transparent 54%,
    transparent 100%
  );

  transform: translate3d(0, 0, 0);
  animation: navbarShimmerContained 10s linear infinite;
  will-change: transform;
}

@keyframes navbarShimmerContained {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(100%, 0, 0);
  }
}




/* LOCK BRAND POSITION DURING NAVBAR MORPH */

.brand {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none;
}


.brand-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin-left: 0;
  transition:
transform .45s cubic-bezier(.22,.9,.3,1),
font-size .45s cubic-bezier(.22,.9,.3,1),
opacity .35s ease;
}


.brand-logo,
.brand-text {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none;
}


/* =======================================
   CODEPREME LIQUID METAL LOGO EFFECT
======================================= */

.logo{
font-weight:600;
font-size:20px;
}


.brand-logo {
  height: 64px;
  width: auto;
  margin-left: 0;
  transition:
transform .45s cubic-bezier(.22,.9,.3,1),
font-size .45s cubic-bezier(.22,.9,.3,1),
opacity .35s ease;
}


.brand-logo,
.hero-logo{

position:relative;
z-index:2;

/* smooth color shift */
animation:
logoHueShift 14s linear infinite;

/* subtle shine reflection */
filter:
hue-rotate(0deg)
brightness(1.15)
contrast(1.15);

}

/* liquid metal shimmer layer */

.brand-logo::after,
.hero-logo::after{

content:"";
position:absolute;
top:0;
left:-150%;
width:300%;
height:100%;
background:linear-gradient(
110deg,
transparent 20%,
rgba(255,255,255,.15) 35%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 65%,
transparent 80%
);
mix-blend-mode:overlay;
animation:liquidMetalFlow 6s linear infinite;
mask-image:linear-gradient(
to right,
rgba(0,0,0,1),
rgba(0,0,0,1)
);
pointer-events:none;
}



.start-btn{
background:white;
color:black;
border:none;
padding:10px 20px;
font-weight:600;
font-size: 15px;
cursor:pointer;
}

.login{
background: transparent;
color:rgb(255, 255, 255);
border:none;
padding:10px 20px;
font-weight:600;
font-size: 15px;
cursor:pointer;
}



/* MEGA MENU */



.mega-menu{

position:absolute;
top:calc(100% + 18px);
left:0;
width:100%;

display:flex;
justify-content:center;

opacity:0;
transform:translateY(-10px);

pointer-events:none;

transition:
opacity .25s ease,
transform .25s ease;

z-index:999;

}


/* invisible hover bridge */

.mega-menu::before{

content:"";

position:absolute;

top:-18px;
left:0;
width:100%;
height:18px;

}

.mega-menu::after{

content:"";

position:absolute;

top:-8px;
left:var(--arrow-x, 50%);

width:16px;
height:16px;

background:rgba(0,0,0,.85);
backdrop-filter:blur(12px);

transform:translateX(-50%) rotate(45deg);

border-radius:2px;

transition:left .35s cubic-bezier(.22,.9,.3,1);

pointer-events:none;

}

/* open state */

.mega-menu.active{

opacity:1;
transform:translateY(0);

pointer-events:auto;

}

.mega-container.reset-clip{
clip-path:polygon(0 0,0 0,0 100%,0 100%);
}

.mega-menu.active .mega-container{

clip-path:polygon(
0 0,
100% 0,
100% 100%,
0 100%
);

}


.mega-container{
position:relative;
overflow:hidden;
width:1200px;
background:rgba(0,0,0,.85);
backdrop-filter:blur(12px);

border-radius:10px;
padding:40px;

/* diagonal reveal start */
clip-path:polygon(0 0,0 0,0 100%,0 100%);
will-change: clip-path;
transition:clip-path .65s cubic-bezier(.22,.9,.3,1);
}

.mega-container::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:200%;
height:100%;

background:linear-gradient(
120deg,
transparent 40%,
rgba(255,255,255,.04) 50%,
transparent 60%
);

animation:megaShimmer 6s linear infinite;

pointer-events:none;

}


/* MEGA MENU CONTENT FADE */

.menu-columns > *{
opacity:0;
transform:translateY(14px);
transition:
opacity .38s ease,
transform .38s ease;
will-change:opacity, transform;
}


.menu-columns{
display:grid;
grid-template-columns:220px 220px 220px 275px;
gap:60px;
}


.menu-col h4{
color:white;
margin-bottom:12px;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:600;
}


.menu-col a::after{

content:"";

position:absolute;
left:0;
bottom:-3px;

width:0;
height:1px;

background:linear-gradient(
90deg,
#00ff99,
#00ffff
);

box-shadow:
0 0 6px rgba(0,255,200,.6),
0 0 12px rgba(0,255,200,.25);

transition:width .35s ease;

}

.menu-col{
display:flex;
flex-direction:column;
gap:10px;
}

.menu-col a{

color:#b5b5b5;
cursor:pointer;
font-size:15px;
font-weight:400;
width: fit-content;

position:relative;
display:inline-block;
text-decoration: none;

transition:
color .25s ease,
transform .25s ease;

}

.menu-col a:hover{

color:white;
transform:translateX(4px);

}

.menu-col a:hover::after{

width:100%;

}


/* SOLUTIONS MEGA MENU ONLY */

.solutions-menu-columns {
  grid-template-columns: 220px 1fr;
  gap: 60px;
}

.solutions-feature-row {
  border-left: 1px solid #333;
  padding-left: 40px;
  min-width: 0;
}

.solutions-feature-group h4 {
  color: white;
  margin-bottom: 22px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}



.solutions-card-row {
  display: flex;
  flex-wrap: wrap; /* THIS is the fix */
  gap: 26px;
  align-items: flex-start;
  width: 100%;
}

.solutions-card-row .side-card-2 {
  width: 140px;
  height: 140px;
  flex: 0 0 130px;
  padding: 18px;
  border-radius: 8px;
}

.solutions-card-row .side-card-content h5 {
  font-size: 13px;
  line-height: 1.1;
  margin-bottom: 4px;
}

.solutions-card-row .side-card-content a {
  font-size: 13px;
  line-height: 1.15;
}




.mt{
margin-top:20px;
}

.menu-side{
display:flex;
flex-direction:column;
gap:20px;
border-left:1px solid #333;
padding-left:40px;
}


.video-side-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.video-side-card-2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.side-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 0;
  opacity: .45;
  transform: scale(1.05);
  pointer-events: none;
}

.video-side-card::after {
  content: "";
  position: absolute;
  inset: 0;


  z-index: 1;
  pointer-events: none;
}

.video-side-card-2::after {
  content: "";
  position: absolute;
  inset: 0;
}

.side-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 0;
  opacity: .45;
  transform: scale(1.05);
  pointer-events: none;
}

.video-side-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,.82),
      rgba(0,0,0,.48)
    );

  z-index: 1;
  pointer-events: none;
}

.video-side-card-2::after {
  content: "";
  position: absolute;
  inset: 0;


  z-index: 1;
  pointer-events: none;
}

.side-card-content {
  position: relative;
  z-index: 2;
}

.side-card-content a {
  color: #d7d7d7;
  text-decoration: none;
}

.side-card-content a:hover {
  color: #fff;
}

.side-card{
background:#1a1a1a;
padding:20px;
border-radius:8px;
}

.side-card-2{
position: relative; /* required for absolute positioning */
overflow: hidden;
background:#1a1a1a;
width: 100px;
height: 100px;
padding:20px;
border-radius:8px;
}

/* ONLY affects the small solution cards */

.side-card-2 .side-card-content {
  position: absolute;
  bottom: 14px;
  left: 14px;

  right: 14px; /* prevents overflow */
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  text-align: left;
  z-index: 2;
}

.side-card h5{
margin-bottom:6px;
}

.side-card-2 .side-card-content h5 {
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.1;
}

.side-card-2 .side-card-content a {
  font-size: 13px;
  line-height: 1.2;
}

.mega-panel{
display:none;
}

.mega-panel.active{
display:block;
}



/* LEGAL PAGE */
.legal-page{
  position:relative;
  min-height:100vh;
  margin-top:-130px;
  padding:calc(12rem + 4px) 24px 110px;
  overflow:hidden;
  background:#050505;
}

.legal-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,255,180,.18), transparent 34%),
    radial-gradient(circle at 8% 18%, rgba(0,255,255,.08), transparent 28%),
    radial-gradient(circle at 90% 30%, rgba(0,255,153,.09), transparent 24%),
    linear-gradient(180deg,#080808,#000 62%,#020202);
}

.legal-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.035) 50%,transparent 65%);
  animation:legalShimmer 12s linear infinite;
}

@keyframes legalShimmer{
  from{transform:translateX(-70%);}
  to{transform:translateX(70%);}
}

.legal-hero,
.legal-layout{
  position:relative;
  z-index:2;
}

.legal-hero{
  max-width:980px;
  margin:0 auto 58px;
  text-align:center;
  
}

.legal-kicker{
  display:inline-block;
  margin-top:9rem;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.legal-hero h1{
  font-size:clamp(44px,7vw,88px);
  line-height:.96;
  letter-spacing:-.065em;
  margin-bottom:22px;
}

.legal-hero p{
  color:rgba(255,255,255,.7);
  font-size:17px;
  line-height:1.8;
  max-width:850px;
  margin:0 auto;
}

.effective-card,
.contact-panel,
.plain-note{
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

.effective-card{
  max-width:430px;
  margin:32px auto 0;
  padding:24px;
}

.effective-card span,
.contact-panel span{
  display:block;
  color:rgba(255,255,255,.52);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:10px;
}

.effective-card strong,
.contact-panel strong{
  display:block;
  font-size:26px;
  letter-spacing:-.035em;
  color:#fff;
}

.effective-card p,
.contact-panel p{
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.55);
}

.legal-layout{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:32px;
  align-items:start;
}

.legal-toc{
  position:sticky;
  top:150px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px);
  border-radius:22px;
  padding:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  max-height:calc(100vh - 180px);
  overflow:auto;
}

.legal-toc h2{
  font-size:18px;
  letter-spacing:-.03em;
  margin-bottom:16px;
}

.legal-toc a{
  display:block;
  color:rgba(255,255,255,.62);
  text-decoration:none;
  font-size:13px;
  line-height:1.35;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .25s ease, transform .25s ease;
}

.legal-toc a:hover{
  color:#fff;
  transform:translateX(4px);
}

.terms-card{
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px);
  border-radius:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  padding:48px;
}

.plain-note{
  padding:18px 20px;
  margin-bottom:30px;
  color:rgba(255,255,255,.72) !important;
  border-color:rgba(0,255,180,.22);
  background:radial-gradient(circle at 0 0,rgba(0,255,180,.13),transparent 40%),rgba(255,255,255,.04);
}

.terms-section{
  scroll-margin-top:150px;
  padding-bottom:44px;
  margin-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.terms-section:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}

.terms-section h2{
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-.05em;
  line-height:1.05;
  margin-bottom:22px;
}

.terms-section h3{
  font-size:18px;
  letter-spacing:-.025em;
  margin:26px 0 10px;
  color:#fff;
}

.terms-section p{
  color:rgba(255,255,255,.7);
  font-size:15.5px;
  line-height:1.85;
  margin-bottom:14px;
}

.contact-panel{
  padding:24px;
  margin-top:22px;
  background:radial-gradient(circle at 0 0,rgba(0,255,180,.14),transparent 42%),rgba(255,255,255,.045);
}



/* ===============================
   CODEPLEXITY FOOTER
================================ */

.cp-footer{

position:relative;

background:
radial-gradient(circle at 50% -40%, rgba(255,255,255,.04), transparent 45%),
#000;

color:#bdbdbd;

padding:140px 80px 50px 80px;

font-family:"Plus Jakarta Sans",sans-serif;

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

overflow:hidden;

}


.cp-footer::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:220%;
height:100%;

background:linear-gradient(
120deg,
transparent 40%,
rgba(255,255,255,.03) 50%,
transparent 60%
);

animation:footerShimmer 14s linear infinite;

pointer-events:none;

}

@keyframes footerShimmer{

0%{
transform:translateX(0);
}

100%{
transform:translateX(40%);
}

}


/* GRID */

.footer-container{

display:grid;

grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;

gap:90px;

max-width:1500px;

margin:auto;

position:relative;

z-index:2;

}

.footer-brand{
max-width:320px;
}

/* BRAND */

.footer-brand h2{

color:#fff;

font-weight:500;

font-size:34px;

line-height:1.25;

margin-bottom:40px;

max-width:260px;

}

.footer-logo{

width:80px;
margin-bottom:15px;

position:relative;
z-index:2;

/* color cycling */
animation:logoHueShift 14s linear infinite;

/* metallic depth */
filter:
hue-rotate(0deg)
brightness(1.15)
contrast(1.15);

}

.footer-logo::after{

content:"";

position:absolute;
top:0;
left:-150%;

width:300%;
height:100%;

background:linear-gradient(
110deg,
transparent 20%,
rgba(255,255,255,.15) 35%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 65%,
transparent 80%
);

mix-blend-mode:overlay;

animation:liquidMetalFlow 6s linear infinite;

pointer-events:none;

}


.footer-logo-wrap{

position:relative;
display:inline-block;

}

.footer-logo-glow{

position:absolute;
left:50%;
top:50%;

width:140px;
height:140px;

background:radial-gradient(
circle,
rgba(0,255,200,.55) 0%,
rgba(0,255,200,.35) 25%,
rgba(0,255,200,.15) 45%,
rgba(0,255,200,.08) 60%,
transparent 75%
);

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

filter:blur(30px);

animation:
logoPulse 6s ease-in-out infinite,
glowHueShift 14s linear infinite;

z-index:-1;

}

.icann{

display:flex;

align-items:center;

gap:14px;

opacity:.65;

margin-top:50px;

font-size:13px;

}

.icann img{

width:44px;

filter:brightness(1.1);

}


/* COLUMNS */

.footer-column h4{
color:#fff;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}

.footer-sub{
margin-top:30px;
}

.footer-column h4{

color:#fff;

font-size:13px;

font-weight:600;

letter-spacing:.06em;

text-transform:uppercase;

margin-bottom:18px;

opacity:.85;

}

.footer-column{

position:relative;

}

.footer-column::before{

content:"";

position:absolute;

left:-30px;
top:0;

width:1px;
height:100%;

background:linear-gradient(
to bottom,
transparent,
rgba(255,255,255,.05),
transparent
);

}

.footer-column:first-of-type::before{
display:none;
}


.footer-column{

display:flex;
flex-direction:column;

}

.footer-column a{

display:inline-block;
align-self:flex-start;

font-size:14px;
margin-bottom:11px;

color:#bdbdbd;

text-decoration:none;

position:relative;

transition:
color .25s ease,
transform .25s ease;

}

/* underline element */

.footer-column a::after{

content:"";

position:absolute;

left:0;
bottom:-2px;

width:0;
height:1px;

background:linear-gradient(
90deg,
#00ff99,
#00ffff
);

transition:width .35s ease;

}

/* hover */

.footer-column a:hover{

color:#fff;

transform:translateX(4px);

}

.footer-column a:hover::after{

width:100%;

}


/* BOTTOM BAR */

.footer-bottom{

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

margin-top:100px;

padding-top:35px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

font-size:13px;

color:#777;

position:relative;

}


.footer-legal{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.footer-legal a{
color:#888;
text-decoration:none;
}

.footer-legal a:hover{
color:#fff;
}

.footer-language{
opacity:.7;
}


.cp-footer.visible .footer-column,
.cp-footer.visible .footer-brand{

opacity:1;
transform:translateY(0);

}

.footer-column,
.footer-brand{

opacity:0;
transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,.9,.3,1);

}



@keyframes megaContentFadeUp{
from{
opacity:0;
transform:translateY(14px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.mega-menu.active .mega-panel.active .menu-columns > *{
animation:megaContentFadeUp .45s cubic-bezier(.22,.9,.3,1) forwards;
}

.mega-menu.active .mega-panel.active .menu-columns > *:nth-child(1){
animation-delay:.16s;
}

.mega-menu.active .mega-panel.active .menu-columns > *:nth-child(2){
animation-delay:.23s;
}

.mega-menu.active .mega-panel.active .menu-columns > *:nth-child(3){
animation-delay:.30s;
}

.mega-menu.active .mega-panel.active .menu-columns > *:nth-child(4){
animation-delay:.37s;
}

@keyframes megaShimmer{

0%{
transform:translateX(0);
}

100%{
transform:translateX(50%);
}

}

@keyframes logoPulse{

0%{
opacity:.7;
transform:translate(-50%,-50%) scale(1);
}

50%{
opacity:1;
transform:translate(-50%,-50%) scale(1.18);
}

100%{
opacity:.7;
transform:translate(-50%,-50%) scale(1);
}

}


@keyframes rotateTemplates{

0%{
transform:rotateY(0deg);
}

100%{
transform:rotateY(360deg);
}

}

.cursor{
display:inline-block;
margin-left:4px;
animation:blink 1s infinite;
}

@keyframes blink{

0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}

}

/* smooth hue shift */

@keyframes logoHueShift{

0%{
filter:hue-rotate(0deg) brightness(1.15) contrast(1.15);
}

100%{
filter:hue-rotate(360deg) brightness(1.15) contrast(1.15);
}

}


/* liquid metal gradient flow */

@keyframes liquidMetalFlow{

0%{
transform:translateX(-40%);
}

100%{
transform:translateX(40%);
}

}

@keyframes glowHueShift{

0%{
filter:blur(40px) hue-rotate(0deg);
}

100%{
filter:blur(40px) hue-rotate(360deg);
}

}

@keyframes buttonHueShift{

0%{

filter:hue-rotate(0deg);
}

100%{

filter:hue-rotate(360deg);
}

}