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

body{
background:#fff;
color:#111;

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

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
letter-spacing:-0.01em;
}

.content-text {
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #ffffff;
}




/* 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: 102px;
  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;


  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;
}

/* HERO */

.hero{
position:relative;
height:95vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;

/* new */
margin-top:-125px;
padding-top:8rem;
}

.hero::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(
circle at center,
rgba(0,0,0,0.15) 0%,
rgba(0,0,0,0.25) 40%,
rgba(0,0,0,0.45) 100%
);
z-index:1;
}

.hero-title{
font-size:60px;
font-weight:700;
letter-spacing:-1px;
}



.hero-video{
position:absolute;
top:50%;
left:50%;

width:100%;
height:100%;

object-fit:cover;   /* fills hero but keeps proportions */

transform:translate(-50%, -50%);
z-index:0;
}

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

.hero-logo{
width:180px;
height:auto;
margin-bottom:32px;
opacity:.95;
position:relative;
transition:
transform .4s 
}

.hero-logo-wrap{
position:relative;
display:inline-block;
}

.logo-glow{

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

width:340px;
height:340px;

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

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

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

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

z-index:-1;

}

.hero-logo:hover{
transform:scale(1.05);
}


.hero-logo-wrap::after{
content:"";
position:absolute;
left:50%;
top:85%;
width:60%;
height:20px;

background:rgba(0,0,0,.25);
filter:blur(12px);

transform:translateX(-50%);
z-index:-1;
}

.hero h1{

font-size:60px;
color: #ffffff;
margin-bottom:20px;
}

/* GET STARTED BUTTON */

.hero-btn{

background:transparent;
border:none;

color:white;

font-size:16px;
font-weight:600;

cursor:pointer;

padding:10px 18px;

position:relative;

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

}

/* underline */

.hero-btn::after{

content:"";

position:absolute;
left:50%;
bottom:-6px;

width:0;
height:2px;

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

transform:translateX(-50%);

transition:width .35s ease;

}

.hero-btn:hover{

animation:buttonHueShift 8s linear infinite;

transform:translateY(-2px);

}

/* expand underline */

.hero-btn:hover::after{

width:65%;

animation:buttonHueShift 8s linear infinite;

}


.template-showcase{
padding:140px 0;
background:#050505;
color:white;
text-align:center;
overflow:hidden;
}

.template-showcase h2{
font-size:42px;
margin-bottom:60px;
}

.template-carousel{
width:100%;
overflow:hidden;
position:relative;
}

.template-track{
display:flex;
gap:60px;
width:max-content;

animation:templateSlide 60s linear infinite;
}

.template-track img{
width:520px;
height:320px;
object-fit:cover;
border-radius:14px;

box-shadow:
0 25px 60px rgba(0,0,0,.6);

transition:
transform .35s ease,
filter .35s ease;

filter:brightness(.75);
}

/* center emphasis */

.template-track img:hover{
transform:scale(1.05);
filter:brightness(1);
}

/* edge fade */

.template-carousel::before,
.template-carousel::after{
content:"";
position:absolute;
top:0;
width:200px;
height:100%;
z-index:2;
pointer-events:none;
}

.template-carousel::before{
left:0;
background:linear-gradient(to right,#050505,transparent);
}

.template-carousel::after{
right:0;
background:linear-gradient(to left,#050505,transparent);
}

@keyframes templateSlide{

0%{
transform:translateX(0);
}

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

}


/* STATS */

.stats{

display:flex;

justify-content:center;

gap:120px;

padding:80px;

background:black;

color:white;

text-align:center;
}

.stat h2{

font-size:46px;
}


.slot-number{
display:flex;
align-items:center;
font-size:3rem;
font-weight:700;
overflow:hidden;
height:1em;
}

.digit{
position:relative;
width:0.55em;
height:1em;
overflow:hidden;
}

.digit-inner{
position:absolute;
top:0;
left:0;
display:flex;
flex-direction:column;
transition:transform 1.8s cubic-bezier(.17,.67,.24,1);
}

.digit-inner span{
height:1em;
display:flex;
align-items:center;
justify-content:center;
}

/* GROW */

.grow{

padding:100px 20px;

text-align:center;
}

.tabs{

margin-top:30px;

display:flex;

justify-content:center;

gap:20px;
}

.tab{

padding:10px 20px;

border-radius:30px;

border:none;

background:#eee;

cursor:pointer;
}

.tab.active{

background:black;

color:white;
}

.portfolio-slider{

margin-top:60px;
overflow:hidden;
width:100%;

}

.portfolio-track{

display:flex;
gap:40px;

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

padding:20px 40px;

}

.portfolio-card{

min-width:420px;

border-radius:14px;

overflow:hidden;

text-decoration:none;

color:white;

position:relative;

box-shadow:
0 20px 40px rgba(0,0,0,.2);

transition:
transform .35s ease,
box-shadow .35s ease;

}

.portfolio-card img{

width:100%;
height:280px;

object-fit:cover;

display:block;

}

.portfolio-card:hover{

transform:translateY(-8px) scale(1.02);

box-shadow:
0 30px 60px rgba(0,0,0,.3);

}

.portfolio-title{

position:absolute;
bottom:14px;
left:16px;

background:rgba(0,0,0,.6);

padding:6px 12px;

border-radius:6px;

font-size:14px;

}


/* PLATFORM */

.platform{
padding:120px 80px;
background:#fff;
}

.platform-header{
max-width:1200px;
margin:0 auto 60px auto;
}

.platform-header h2{
font-size:42px;
font-weight:600;
text-align:left;
}

.platform-grid{
max-width:1200px;
margin:0 auto;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}





/* VIDEO BACKGROUND */
.card-bg-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* DARK OVERLAY (IMPORTANT for readability) */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(53, 52, 52, 0.85); /* adjust */
  z-index:1;
}



.card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  height:450px;
  background:#f5f5f5;
  
  display:flex;
  flex-direction:column;
  justify-content:flex-start; /* 👈 THIS is the key */
  transition: .3s;
}

/* content wrapper */
.card-content{
  position:relative;
  z-index:2;
  color:#ffffff;

  padding:40px;
  
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start; /* ensures top alignment */
}

.card:hover{

transform:translateY(-6px);
}

/* SCROLL FADE */

.fade-in{
opacity:0;
transform:translateY(40px);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,.9,.3,1);
}

.fade-in.visible{
opacity:1;
transform:translateY(0);
}


/* AI BUILDER */

.ai-builder{

padding:120px 20px;

text-align:center;
}

.ai-cards{

display:flex;

justify-content:center;

gap:40px;

margin-top:40px;
}

.ai-card{

background:black;

color:white;

padding:50px;

border-radius:12px;

width:350px;
}



/* ===============================
   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);
}

}


/* =========================
   INTERACTIVE 3D DOME
========================= */

/* =========================
   INTERACTIVE 3D DOME
========================= */

.dome-section{
position:relative;
color:#fff;
text-align:center;
overflow:hidden;
background:black;

/* match hero height */
height:95vh;

/* balanced spacing */
padding:80px 20px 60px;

margin-top:0;
isolation:isolate;

display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}


.dome-section::before{
content:"";
position:absolute;
top:-120px;
left:0;
width:100%;
height:120px;

background:linear-gradient(
to bottom,
transparent,
black
);

z-index:1;
}


/* VIDEO BACKGROUND */

.dome-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
pointer-events:none;
}


/* CONTENT ABOVE VIDEO */



.dome-header{
max-width:900px;
margin:0 auto 48px;
z-index: 2;
}

.dome-footer{
font-size:45px;
padding-top:4rem;
z-index: 2;
}

.dome-kicker{
text-transform:uppercase;
letter-spacing:.18em;
font-size:12px;
color:rgba(255,255,255,.6);
margin-bottom:14px;
}

.dome-header h2{
font-size:clamp(34px,5vw,62px);
line-height:1.02;
letter-spacing:-0.04em;
margin-bottom:14px;
}

.dome-subtext{
max-width:700px;
margin:0 auto;
color:rgba(255,255,255,.72);
font-size:16px;
line-height:1.7;
}

#dome-container{
position:relative;
width:100%;
height:520px;     /* reduced from 760px */
max-width:1500px;
margin:20px auto 0 auto;
cursor:grab;
z-index:2;
}

#dome-container.is-dragging{
cursor:grabbing;
}

#dome-container canvas{
display:block;
width:100%;
height:100%;
background:transparent;
}