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

html{
background:#000;
}

body{
background:#000;
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: 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;


  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:-126px;
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:96px 80px 0;

background:transparent;

color:white;

text-align:center;
}

.stat h2{

font-size:46px;
}


.slot-number{
display:flex;
align-items:center;
justify-content: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;
}

/* Disable cursor glow / glare on AI cards without touching tilt JS or other styles */
.ai-card::before{
  /* force the glare to be invisible and inert */
  opacity: 0 !important;
  --glare-opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}


/* ===============================
   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
========================= */

.dome-section{
height:100vh;
min-height:820px;
padding:70px 20px 60px;
justify-content:center;
background:#000;
position:relative;
color:#fff;
text-align:center;
overflow:hidden;


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


/* light overlay above the background video */
.dome-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);/* adjust alpha (0.05 - 0.25) to taste */
  pointer-events: none;
  z-index: 1;
}


.dome-section::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 48%, transparent 0 44%, rgba(0,0,0,.35) 62%, #000 100%);
z-index: 1;
pointer-events:none;
}


/* VIDEO BACKGROUND */

.dome-video{
position:absolute;
opacity:.4;
filter:saturate(.7) contrast(1.2);
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 10px;
z-index: 2;
}

.dome-footer{
font-size:45px;
padding-top:4rem;
z-index: 2;
padding-top:.5in;
margin-top:-18px;
font-size:clamp(32px, 4vw, 58px);
}

.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{
height:min(66vh, 680px);
max-width:1320px;
margin:0 auto;
touch-action:none;
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;
}





/* =========================================
   HOME PAGE BODY REVISION LAYER
========================================= */

.hero{
height:auto;
min-height:calc(100vh + 170px);
background:#000;
margin-top:-180px;
padding-top:100px;
}

.hero::after{
background:
linear-gradient(to bottom, rgba(0,0,0,.16) 0%, rgba(0,0,0,.1) 45%, rgba(0,0,0,.72) 82%, #000 100%),
radial-gradient(circle at center, rgba(0,0,0,.04) 0%, rgba(0,0,0,.16) 52%, rgba(0,0,0,.42) 100%);
}

.hero::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:-1px;
height:28%;
background:linear-gradient(to bottom, transparent, #000 78%);
z-index:2;
pointer-events:none;
}

.hero-content{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transform:none;
}



.grow{
padding:120px 0 110px;
overflow:visible;
background:#fff;
}

.grow h2{
font-size:clamp(42px, 5vw, 74px);
line-height:.95;
font-weight:600;
letter-spacing:0;
margin-bottom:22px;
}

.grow > p{
font-size:19px;
color:#222;
}

.tabs{
gap:14px;
margin-top:44px;
flex-wrap:wrap;
padding:0 24px;
}

.tab{
background:transparent;
color:#121212;
font-size:15px;
font-weight:600;
padding:10px 18px;
border:1px solid transparent;
transition:background .35s ease, color .35s ease, transform .35s ease;
}

.tab:hover{
transform:translateY(-2px);
}

.tab.active{
background:#000;
color:#fff;
border-color:#000;
}

.portfolio-slider{
position:relative;
margin-top:82px;
min-height:700px;
overflow:visible;
}

.portfolio-slider::before,
.portfolio-slider::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:9vw;
z-index:4;
pointer-events:none;
}

.portfolio-slider::before{
left:0;
background:linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.portfolio-slider::after{
right:0;
background:linear-gradient(to left, #fff, rgba(255,255,255,0));
}

.portfolio-track{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
justify-content:center;
align-items:stretch;
gap:24px;
max-width:1180px;
margin:0 auto;
padding:42px 34px 40px;
transition:transform 1.05s cubic-bezier(.16,1,.3,1), opacity .45s ease, filter .45s ease;
will-change:transform, opacity;
overflow:visible;
}

.portfolio-track.is-sliding-out{
opacity:0;
filter:blur(10px);
transform:translateX(-180px);
}

.portfolio-track.is-sliding-in{
animation:portfolioSlideIn .95s cubic-bezier(.16,1,.3,1);
}

@keyframes portfolioSlideIn{
from{opacity:0; filter:blur(10px); transform:translateX(180px);}
to{opacity:1; filter:blur(0); transform:translateX(0);}
}

.portfolio-card{
display:block;
min-width:0;
width:100%;
height:292px;
border-radius:8px;
background:rgba(14,14,14,.5);
border:1px solid rgba(130,130,130,.42);
isolation:isolate;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 18px 44px rgba(0,0,0,.14);
backdrop-filter:blur(14px);
opacity:0;
transform:translateY(34px);
transition:
opacity .9s ease,
transform .9s cubic-bezier(.16,1,.3,1),
box-shadow .35s ease;
will-change:opacity, transform;
}

.portfolio-card.is-visible{
opacity:1;
transform:translateY(0);
}

.portfolio-card.is-visible:hover{
transform:translateY(-14px) scale(1.018);
box-shadow:
0 0 0 1px rgba(255,255,255,.12) inset,
0 28px 68px rgba(0,0,0,.22);
}

.portfolio-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.18) 45%, rgba(0,0,0,.78));
z-index:1;
}

.portfolio-card img{
height:100%;
filter:saturate(.92) contrast(1.04);
}

.portfolio-kicker,
.portfolio-title,
.portfolio-card p{
position:absolute;
left:22px;
z-index:2;
max-width:calc(100% - 44px);
}

.portfolio-kicker{
top:22px;
font-size:11px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.75);
}

.portfolio-title{
top:auto;
bottom:76px;
background:none;
padding:0;
font-size:26px;
line-height:1;
font-weight:650;
}

.portfolio-card p{
top:auto;
bottom:22px;
font-size:14px;
line-height:1.35;
color:rgba(255,255,255,.84);
}



.card-arrow{
position:absolute;
right:32px;
bottom:30px;
z-index:3;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:999px;
color:#fff;
font-size:34px;
line-height:1;
text-decoration:none;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
transition:background .25s ease, transform .25s ease;
}

.card-arrow:hover{
background:rgba(255,255,255,.22);
transform:translateX(5px);
}

.ai-builder{
padding:110px 20px 150px;
background:
linear-gradient(to bottom, #fff 0%, #f6f3ef 54%, #776f64 100%);
perspective:1800px;
perspective-origin:50% 42%;
}

.ai-builder h2{
max-width:820px;
margin:0 auto;
font-size:clamp(42px, 5vw, 72px);
line-height:.98;
font-weight:560;
letter-spacing:0;
}

.ai-builder > p{
margin-top:54px;
font-size:20px;
}

.ai-cards{
gap:56px;
align-items:stretch;
margin-top:110px;
flex-wrap:wrap;
perspective:1800px;
}

.ai-card{
position:relative;
width:min(440px, 92vw);
min-height:620px;
padding:0 0 44px;
border-radius:8px;
overflow:hidden;
text-decoration:none;
box-shadow:0 30px 80px rgba(0,0,0,.22);
transform-style:preserve-3d;
transition:transform .08s ease-out, box-shadow .3s ease;
will-change:transform;
--glare-x:50%;
--glare-y:35%;
--glare-opacity:0;
transform-origin:center;
}

.ai-card::before{
content:"";
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
background:
radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255,255,255,.34), rgba(255,255,255,.09) 18%, rgba(255,255,255,0) 42%),
linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 36%);
opacity:var(--glare-opacity);
mix-blend-mode:screen;
transition:opacity .25s ease;
}

.ai-card:hover{
box-shadow:0 40px 100px rgba(0,0,0,.32);
}

.ai-card-media{
height:372px;
position:relative;
overflow:hidden;
background:#080808;
transform:translateZ(34px);
}

.ai-card-media::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(0,0,0,0) 42%, #000 100%);
}

.ai-card-media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:brightness(.78);
}

.ai-card-media span{
position:absolute;
left:28px;
top:24px;
z-index:2;
font-size:13px;
letter-spacing:.16em;
font-weight:800;
background:#f04040;
padding:12px 10px;
}

.ai-card-collage{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:8px;
padding:18px;
}

.ai-card-collage img{
height:160px;
border-radius:4px;
}

.ai-card h3{
margin:34px auto 22px;
font-size:17px;
font-weight:650;
transform:translateZ(46px);
}

.ai-card p{
max-width:310px;
margin:0 auto 24px;
font-size:19px;
line-height:1.35;
color:rgba(255,255,255,.54);
transform:translateZ(34px);
}

.ai-card strong{
display:block;
font-size:22px;
color:#fff;
transform:translateZ(54px);
}

.trial-section{
position:relative;
height:100vh;
min-height:760px;
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
text-align:center;
color:#fff;
}

#trialParticles{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
}

.trial-content{
position:relative;
z-index:1;
max-width:900px;
padding:0 24px;
}

.trial-content h2{
font-size:clamp(48px, 6vw, 88px);
line-height:1.02;
font-weight:500;
letter-spacing:0;
}

.trial-content p{
font-size:20px;
margin-top:48px;
}

.trial-btn{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:54px;
min-width:190px;
height:72px;
background:#fff;
color:#000;
font-weight:800;
font-size:16px;
text-transform:uppercase;
text-decoration:none;
transition:transform .25s ease, background .25s ease;
}

.trial-btn:hover{
transform:translateY(-4px);
background:#e9e9e9;
}

/* DOMAIN SEARCH: premium-styled domain lookup */
.domain-section{
  padding: 56px 20px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgba(4,6,12,0.6), rgba(3,7,18,0.35));
}

.domain-container{
  width: 100%;
  max-width: 1080px;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 40px rgba(2,6,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(8px) saturate(110%);
}

/* header */
.domain-header h2{
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.domain-header p{
  margin: 0 0 16px 0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.35;
}

/* search form */
.domain-search{
  display: block;
  width: 100%;
}

.premium-search{
  display: flex;
  gap: 10px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
}

/* left input */
.search-left{
  flex: 1 1 auto;
  min-width: 0;
}

.search-input{
  width: 100%;
  display: block;
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  caret-color: #ffd6f0;
}

/* middle TLD select */
.search-middle{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.tld-select{
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.02);
  color: #ffffff;
  border: none;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  min-width: 84px;
  text-align: center;
}

/* right button */
.search-right{ flex: 0 0 auto; }

.search-btn{
  display: inline-block;
  background: linear-gradient(90deg, #7b63ff 0%, #ff6aa6 100%);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(123,99,255,0.14);
  transition: transform .12s ease, box-shadow .12s ease, opacity .08s ease;
}

.search-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(123,99,255,0.18);
}

.search-btn:active{ transform: translateY(-1px); }
.search-btn:focus{ outline: 3px solid rgba(123,99,255,0.18); outline-offset: 2px; }

/* result & helper text */
.domain-result{
  margin-top: 12px;
  min-height: 22px;
  color: rgba(230,240,255,0.96);
  font-weight: 700;
  font-size: 15px;
}

.domain-result a{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 800;
}

.domain-subtext{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.56);
}

/* accessibility helper */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* responsive: stack on small screens */
@media (max-width: 720px){
  .domain-container{ padding: 18px; border-radius: 12px; }
  .premium-search{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .tld-select{ min-width: 100%; text-align: left; padding-left: 12px; }
  .search-btn{ width: 100%; padding: 12px; }
  .search-input{ padding: 12px; }
}

/* --- Squarespace-style domain section override / replacement --- */
.domain-section.domain-spotlight{
  background: #000;
  padding: 120px 20px 60px;
  display:flex;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.domain-inner{
  width:100%;
  max-width:920px;
  margin:0 auto;
}

.domain-hero{
  font-size:clamp(30px,4.6vw,44px);
  font-weight:600;
  color:#ffffff;
  margin:0 0 28px 0;
  letter-spacing: -0.02em;
}

/* pill search */
.search-pill{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 auto;
  margin-bottom: 1in;
  width:100%;
  max-width:760px;
  height:66px;
  padding:10px 16px;
  border-radius:44px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  align-items:center;
}

/* left icon */
.pill-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:rgba(255,255,255,0.7);
  flex:0 0 44px;
  border-radius:10px;
  background:transparent;
  border:none;
  pointer-events:none;
}

/* main input */
.pill-input{
  flex:1 1 auto;
  min-width:0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size:16px;
  font-weight:500;
  padding:8px 6px;
  caret-color:#fff;
}

/* tld select */
.pill-tld{
  flex: 0 0 auto;
  background: rgba(255,255,255,0.02);
  color: #fff;
  border: none;
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  min-width:88px;
  text-align:center;
}

/* action button (arrow) */
.pill-action{
  flex:0 0 auto;
  width:56px;
  height:44px;
  border-radius:10px;
  border:none;
  background: linear-gradient(90deg,#7b63ff 0%, #ff6aa6 100%);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(123,99,255,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* helper link */
.domain-helper{
  margin-top:14px;
}
.transfer-link{
  color: rgba(255,255,255,0.65);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* trusted row */
.trusted{
  margin-top: 1in; /* ~96px — about an inch of extra space between the search bar and avatar bubbles */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.avatars{
  display:flex;
  gap: -8px;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}

.avatar{
  width:52px;
  height:52px;
  border-radius:999px;
  background-size:cover;
  background-position:center;
  border: 2px solid rgba(0,0,0,0.25);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  margin-left:-12px;
  transform: translateZ(0);
}

/* first avatar not shifted left too far */
.avatars .avatar:first-child{ margin-left:0; }

.trusted-text{
  color:rgba(255,255,255,0.9);
  font-weight:700;
  font-size:18px;
}

/* results area */
.domain-result{
  margin-top:22px;
  color: rgba(230,240,255,0.95);
  font-weight:600;
  font-size:15px;
  min-height:22px;
}

/* responsive */
@media (max-width:720px){
  .domain-section.domain-spotlight{ padding:80px 18px 40px; }
  .search-pill{ flex-direction:row; gap:10px; padding:8px; height:60px; border-radius:36px; }
  .pill-tld{ min-width:72px; padding:8px 10px; }
  .pill-action{ width:48px; height:40px; border-radius:10px; }
  .domain-hero{ font-size:22px; }
  .avatar{ width:44px; height:44px; margin-left:-10px; }
}

/* Continuous marquee / slot machine fixes */
.template-carousel{
  position:relative;
  overflow:hidden;
  width:100%;
  margin:0 auto;
}

/* track: duplicated by JS for seamless loop */
.template-track{
  display:flex;
  gap:60px;
  width:max-content;
  align-items:center;
  will-change:transform;
  animation: templateSlide var(--marquee-duration, 30s) linear infinite;
  /* ensure pointer events flow to children */
  pointer-events:auto;
}

/* each slide item: ensure fixed width, allow hover scale and staggered float */
.template-track > *{
  flex: 0 0 auto;
  display:block;
  cursor: pointer;
  transform-origin:center center;
  transition: transform .28s cubic-bezier(.22,.9,.3,1), filter .28s ease;
  --i: 0;
  animation: float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.06s);
}

/* image-specific rules (existing images) */
.template-track img{
  display:block;
  width:520px;
  height:320px;
  object-fit:cover;
  border-radius:14px;
  box-shadow: 0 25px 60px rgba(0,0,0,.6);
  filter:brightness(.75);
}

/* hover: enlarge slightly and lift */
.template-track > *:hover,
.template-track > *:focus{
  transform: translateY(-8px) scale(1.06);
  filter:brightness(1) saturate(1.04);
  z-index:6;
  animation-play-state: paused; /* pause float while hovered for crisp interaction */
}

/* small responsive sizing */
@media (max-width: 980px){
  .template-track img{ width:360px; height:220px; }
}

@media (max-width: 640px){
  .template-track img{ width:260px; height:160px; }
}

/* float (subtle staggered vertical motion) */
@keyframes float{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}

/* marquee animation (translate exactly half the duplicated width) */
@keyframes templateSlide{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ensure marquee sits above overlays and pseudo-elements */
.template-carousel{
  position: relative;
  z-index: 60; /* above most page overlays */
}

/* ensure track and items render above the carousel fades */
.template-track{
  position: relative;
  z-index: 50;
  visibility: visible; /* in case something hid it */
  display: flex; /* ensure layout */
}

.template-track > *{
  position: relative;
  z-index: 55;
  cursor: pointer;
}

/* Ensure project lounge content is visible above background layers */
.project-lounge-section {
  position: relative;
  z-index: 6; /* raise the whole section so the title sits above background layers */
  overflow: visible;
  padding-top: 60px;
}

/* Big, centered, high-contrast section title */
.project-lounge-title {
  color: #ffffff; /* pure white */
  text-align: center;
  font-weight: 700;
  font-size: clamp(36px, 4.0vw, 84px); /* responsive large heading */
  line-height: .65;
  letter-spacing: -0.02em;
  margin: 28px auto 48px;
  max-width: 1200px;
  position: relative;
  z-index: 8; /* ensure title sits on top */
  padding-bottom: .5in;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 6px 30px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.02);
}

/* Layout for the template card stage */
.hero-template-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 3;            /* above project-lounge-section base */
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Make each card visible and styled */
.hero-template-card {
  display: block;
  width: 200px;
  min-width: 160px;
  background: rgba(0,0,0,0.45);   /* subtle panel to separate from dark background */
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  transform: translateY(0);
  position: relative;
  z-index: 4;               /* ensure cards float above most things */
  opacity: 1;
}

/* Make sure images show and maintain aspect */
.hero-template-card img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

/* Text inside the card */
.hero-template-card span,
.hero-template-card .portfolio-title,
.hero-template-card p {
  display: block;
  padding: 10px 12px;
  color: #fff;
  line-height: 1.2;
}

/* Small kicker style adjust if needed */
.hero-template-card span {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Hover / focus interaction */
.hero-template-card:hover,
.hero-template-card:focus {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  z-index: 6;
  text-decoration: none;
}

/* Ensure stats don't visually cover the cards */
.stats {
  position: relative;
  z-index: 1;   /* keep stats beneath the template cards */
  padding-bottom: 1in;
}

/* If there's an underlying video or hero element, keep it beneath the cards */
.project-lounge-section video,
.project-lounge-section .hero-video {
  position: relative;
  z-index: 0;
}

/* HERO TEMPLATE MARQUEE (single-row infinite flow) */
.hero-template-stage {
  overflow: hidden;          /* hide wrapped rows */
  padding: 28px 12px;        /* keep spacing */
  display: block;            /* container for marquee track */
}

.hero-template-track-marquee{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:nowrap;          /* force single row */
  will-change:transform;
  /* animation values set from JS via --marquee-duration and --marquee-distance */
  animation: marquee var(--marquee-duration, 28s) linear infinite;
  transform: translate3d(0,0,0);
  pointer-events:auto;
  padding:6px 2px;
}

.hero-template-track-marquee > *{
  flex: 0 0 auto;
  display:block;
  transform: translateZ(0);
}

/* pause on hover/focus for better UX */
.hero-template-stage:hover .hero-template-track-marquee,
.hero-template-stage:focus-within .hero-template-track-marquee {
  animation-play-state: paused;
}

/* marquee keyframes: moves by computed distance (set by JS) */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--marquee-distance, 0px) * -1)); }
}

.platform .card-arrow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  backdrop-filter: none !important;
  /* keep positioning from original .card-arrow rule */
}