/* ======================================================
   LOGO
====================================================== */
.logo img{
  width:80px;

  border-radius:14px; /* soft corners */

  padding:6px; /* space for border */

  background:rgba(0,0,0,0.6);

  border:1px solid rgba(0,255,255,0.25); /* thin border */

  /* glow layers */
  box-shadow:
    0 0 2px rgba(0,255,255,0.4),
    0 0 20px rgba(0,255,255,0.25),
    0 0 40px rgba(0,255,255,0.15);

  transition:0.4s;
}




.logo img:hover{
  transform:scale(1.08);

  box-shadow:
    0 0 12px rgba(0,255,255,0.6),
    0 0 30px rgba(0,255,255,0.4),
    0 0 60px rgba(0,255,255,0.25);

  border:1px solid rgba(0,255,255,0.5);
}

.logo img{
  filter:brightness(1.3) contrast(1.2);
}




/* =========================
   PANEL HOVER FX (GLOBAL)
========================= */

.panel{
  transition:0.35s ease;
  cursor:pointer;
}

/* HOVER EFFECT */
.panel{
  position:relative;

  width:220px;
  overflow:hidden;

  border-radius:12px;

  border:1px solid rgba(0,255,255,0.2); /* 👈 REQUIRED */

  background:rgba(0,0,0,0.4);

  transition:0.35s ease;
}


.panel img{
  width:100%;
  height:140px;
  object-fit:cover;

  display:block;

  transition:0.35s ease;
}

.panel:hover{
  transform:translateY(-6px) scale(1.03);

  border:1px solid #00eaff;

  box-shadow:
    0 0 15px rgba(0,255,255,0.7),
    0 0 35px rgba(0,255,255,0.4),
    0 0 80px rgba(0,255,255,0.25);
}




/* FX = cyan */
.panel-fx1:hover,
.panel-fx2:hover{
  box-shadow:0 0 30px rgba(0,255,255,0.6);
}

/* AI = green */
.panel-ai1:hover,
.panel-ai2:hover{
  box-shadow:0 0 30px rgba(0,255,150,0.6);
}

/* NODE = blue */
.panel-nodes:hover{
  box-shadow:0 0 30px rgba(0,150,255,0.6);
}

/* COMP = magenta */
.panel-comp:hover{
  box-shadow:0 0 30px rgba(255,0,150,0.6);
}



/* ======================================================
   1. RESET + BASE SETTINGS
   (Never touch much here)
====================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:#010309;
  color:#e5e7eb;
  overflow-x:hidden;
}

/* Prevent image overflow issues */
img{
  max-width:100%;
  display:block;
}


/* ======================================================
   2. BACKGROUND PARTICLES (CANVAS)
   (Visual only — don't change)
====================================================== */
#particles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}


/* ======================================================
   3. GLOBAL SECTION SYSTEM
   (Controls alignment everywhere)
====================================================== */
.section{
  max-width:1100px;   /* change this to control page width */
  margin:0 auto;
  padding:100px 20px;
  text-align:center;
  position:relative;
  z-index:2;
}

.section h2{
  font-family:'Orbitron';
  color:#00eaff;
  margin-bottom:40px;
}


/* ======================================================
   4. NAVIGATION (LEFT SIDE)
====================================================== */
nav{
  position:fixed;
  top:50%;
  left:20px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  background:rgba(0,0,0,0.6);
  border-radius:10px;
  border:1px solid rgba(0,255,255,0.2);
  z-index:20;
}

nav a{
  color:#00eaff;
  text-decoration:none;
  font-size:13px;
  transition:0.3s;
}

nav a:hover{
  transform:translateX(5px);
}


/* ======================================================
   5. LOGO (TOP CENTER)
   (Brand anchor)
====================================================== */
.logo{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
}

.logo img{
  height:55px;
  filter:drop-shadow(0 0 10px rgba(0,255,255,0.5));
}



/* ======================================================
   HERO LAYOUT SYSTEM (FINAL FIX)
====================================================== */


.hero-hub{
  display:grid;

  grid-template-columns: 1fr 700px 1fr;
  grid-template-rows: auto auto auto;

  gap:18px;

  align-items:center;
  justify-items:center;

  max-width:1200px;

  margin:0 auto;      /* ✅ ADD THIS (CENTER FIX) */
  width:100%;         /* ✅ ADD THIS (IMPORTANT) */

  height:100vh;
}


/* CENTER IMAGE */
.center-artist{
  grid-column:2;
  grid-row:1 / span 2;
  z-index:3;
transform: translateY(60px);
}

.center-artist img{
  width:720px;
}

/* LEFT SIDE */
.panel-fx1{
  grid-column:1;
  grid-row:1;

}

.panel-fx2{
  grid-column:1;
  grid-row:2;
}

/* RIGHT SIDE */
.panel-nodes{
  grid-column:3;
  grid-row:1;
}

.panel-showreel{
  grid-column:3;
  grid-row:2;
}

/* TOP CENTER PANEL (AI) */
.panel-ai{
  position:absolute;
  top:40px;
  left:50%;
  transform:translateX(-50%);
}


/* Glow background */
.hero-hub::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at center, rgba(0,255,255,0.1), transparent 70%);
}

#hero{
  display:flex;
  justify-content:center;
}


/* ===== PANEL POSITIONS (FINAL 7 PANEL) ===== */

/* LEFT */
.panel-fx1{ grid-column:1; grid-row:1; }
.panel-fx2{ grid-column:1; grid-row:2; }
.panel-roto{ grid-column:1; grid-row:3; }

/* RIGHT */
.panel-nodes{ grid-column:3; grid-row:1; }
.panel-ai2{ grid-column:3; grid-row:2; }
.panel-comp{ grid-column:3; grid-row:3; }

/* BOTTOM CENTER */
.panel-ai1{
  grid-column:2;
  grid-row:3;
  margin-top:10px;
}




/* PANEL BASE (VERY IMPORTANT) */
.panel{
  width:220px;
  border-radius:14px;
  overflow:hidden;

  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);

  border:1px solid rgba(0,255,255,0.2);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.6),
    0 0 20px rgba(0,255,255,0.1);

  transition:0.3s;
}

/* IMAGE */
.panel img{
  width:100%;
  height:140px;
  object-fit:cover;
}



.hero-hub{
  perspective:1600px;
}


/* LEFT SIDE */
.panel-fx1,
.panel-fx2{
  transform:rotateY(-6deg) rotateX(2deg);
}

/* RIGHT SIDE */
.panel-nodes,
.panel-showreel{
  transform:rotateY(6deg) rotateX(2deg);
}

/* TOP PANEL */
.panel-ai{
  transform:translateX(-50%) rotateX(5deg);
}



.drag-line{
  position:absolute;
  top:0;
  left:50%;
  width:3px;
  height:100%;
  background:#00eaff;
  cursor:ew-resize;
  z-index:5;
}


/* =========================
   DRAG HINT UI
========================= */

.drag-hint-ui{
  position:absolute;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  color:#00eaff;
  font-size:13px;
  letter-spacing:1px;
  pointer-events:none;
  opacity:0.8;
}

/* animated pulse */
.drag-hint-ui span{
  animation:hintPulse 2s infinite;
}

@keyframes hintPulse{
  0%{ opacity:0.3; }
  50%{ opacity:1; }
  100%{ opacity:0.3; }
}


/* INNER ENERGY CORE */

.drag-line::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  width:6px;
  height:6px;
  border-radius:50%;

  background:#00eaff;

  box-shadow:
    0 0 10px #00eaff,
    0 0 20px #00eaff;

  animation:coreFlicker 1.5s infinite;
}


/* OUTER RING PULSE */
@keyframes ringPulse{
  0%{
    transform:translate(-50%,-50%) scale(1);
    opacity:0.8;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.3);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:0.8;
  }
}

/* CORE FLICKER */
@keyframes coreFlicker{
  0%{ opacity:0.6; }
  50%{ opacity:1; }
  100%{ opacity:0.6; }
}


/* GLOW ALONG LINE */
.drag-line{
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(0,255,255,0.9),
    transparent
  );

  box-shadow:0 0 15px rgba(0,255,255,0.6);
}

.drag-line:hover::after{
  transform:translate(-50%,-50%) scale(1.4);
  box-shadow:
    0 0 20px rgba(0,255,255,1),
    0 0 40px rgba(0,255,255,0.6);
}

/* =========================
   ENERGY RING HANDLE (VFX STYLE)
========================= */

.drag-line::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  width:48px;
  height:48px;

  border-radius:50%;
  border:2px solid rgba(0,255,255,0.9);

  background:rgba(0,255,255,0.05);

  box-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 25px rgba(0,255,255,0.4);

  animation:ringPulse 2s infinite ease-in-out;
}


/* =========================
   DRAG INSTRUCTION TEXT
========================= */

.drag-text{
  position:absolute;
  top:50%;

  transform:translateY(-50%);

  font-size:12px;
  letter-spacing:2px;

  color:#00eaff;

  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 20px rgba(0,255,255,0.4);

  pointer-events:none;

  transition:left 0.05s linear; /* smooth follow */
}




/* =========================
   AUTO DEMO GUIDE
========================= */

let demoRunning = true;

let demoInterval = setInterval(()=>{
  if(!demoRunning) return;

  let current = parseFloat(after.style.width) || 50;
  current += 1;

  if(current > 80) current = 20;

  after.style.width = current + "%";
  dragLine.style.left = current + "%";

},30);

/* STOP when user interacts */
dragLine.addEventListener("mousedown", ()=>{
  demoRunning = false;
});




/* ======================================================
   8. PIPELINE FLOW
====================================================== */
.pipeline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:40px auto;
}

.pipeline div{
  padding:8px 14px;
  border-radius:6px;
  background:rgba(0,255,255,0.1);
  border:1px solid rgba(0,255,255,0.2);
}


/* ======================================================
   9. BEFORE / AFTER VIEWER (FINAL FIX)
====================================================== */

.compare-controls{
  margin-bottom:20px;
}

.buttons{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.buttons button{
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(0,255,255,0.3);
  background:transparent;
  color:#00eaff;
  cursor:pointer;
  transition:0.3s;
}

.buttons button.active{
  background:#00eaff;
  color:#000;
}

/* MAIN VIEWER */
.ba-container{
  position:relative;
  width:100%;
  max-width:4000px;
  aspect-ratio:16/9;
  margin:30px auto;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(0,255,255,0.2);
}

/* BOTH IMAGES FULL COVER */
.before,
.after{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.before img,
.after img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* AFTER OVERLAY */
.after{
  width:50%;
  overflow:hidden;
}

/* DIVIDER LINE */
.after::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:2px;
  height:100%;
  background:#00eaff;
  box-shadow:0 0 10px #00eaff;
}

/* SLIDER */
.slider{
  width:100%;
  margin-top:10px;
}

/* ======================================================
   10. SERVICES
====================================================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}

.service{
  padding:20px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(0,255,255,0.1);
  transition:0.3s;
}

.service:hover{
  transform:translateY(-5px);
  box-shadow:0 0 20px rgba(0,255,255,0.2);
}


/* ======================================================
   11. TEAM
====================================================== */

/* =========================
   TEAM GRID (COMPACT + CLEAN)
========================= */

.grid{
  display:grid;

  /* smaller cards */
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

  /* FIX: reduce huge spacing */
  gap:8px;

  /* center grid nicely */
  justify-items:center;
}


/* =========================
   CARD (BALANCED SIZE)
========================= */

.card{
  position:relative;

  width:100%;
  max-width:180px;   /* 👈 controls overall card size */

  border-radius:12px;
  overflow:hidden;

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(0,255,255,0.2);

  transition:0.4s;
}


/* =========================
   IMAGE (MATCH CARD SIZE)
========================= */

.card img{
  width:100%;
  height:160px;   /* 👈 reduced */
  object-fit:cover;
}


/* =========================
   INFO TEXT
========================= */

.info-box{
  padding:6px;
  font-size:11px;
  text-align:center;
  opacity:0.8;
}


/* =========================
   HOVER (SUBTLE PREMIUM FEEL)
========================= */

.card:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:
    0 15px 30px rgba(0,0,0,0.6),
    0 0 20px rgba(0,255,255,0.3);
}


/* ======================================================
   12. CONTACT
====================================================== */
/* spacing balance */
.contact-node-system{
  margin-bottom:30px;
}

.contact-numbers{
  margin-top:10px;
  margin-bottom:30px;
}

.phone-card{
  display:inline-flex;   /* 👈 key change */
  align-items:center;
  gap:8px;

  padding:8px 14px;

  width:auto;            /* 👈 remove stretching */
  max-width:220px;       /* 👈 controls length */

  border-radius:20px;
  cursor:pointer;

  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.25);

  font-size:13px;        /* 👈 slightly smaller */
  letter-spacing:0.5px;

  transition:0.3s;
}


/* ======================================================
   13. FORM
====================================================== */
form{
  max-width:400px;
  margin:30px auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

input,textarea{
  padding:10px;
  background:#0b0f14;
  border:1px solid rgba(255,255,255,0.1);
  color:white;
}


/* ======================================================
   14. RESPONSIVE
====================================================== */
@media(max-width:900px){

  nav{
    flex-direction:row;
    top:auto;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
  }

  .center-artist img{
    width:200px;
  }


}


/* =========================
  15. SHOWREEL BUTTON (SCI-FI STYLE)
========================= */

.show-btn{
  padding:8px 18px;
  border-radius:30px;
  border:1px solid rgba(0,255,255,0.5);

  background:rgba(0,255,255,0.1);
  color:#00eaff;

  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;

  cursor:pointer;
  position:relative;
  overflow:hidden;

  transition:0.3s;
}

/* moving glow line */
.show-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,#00eaff,transparent);
  transition:0.4s;
}

.show-btn:hover::before{
  left:100%;
}

/* hover glow */
.show-btn:hover{
  background:#00eaff;
  color:#000;
  box-shadow:0 0 20px rgba(0,255,255,0.6);
}





/* =========================
   INSTRUCTION UI (FINAL)
========================= */


.instruction-ui{
  position:absolute;
  left:-180px;   /* sits just outside viewer */
  top:50%;
  transform:translateY(-50%);
}

  /* anchor near viewer */
  left:calc(50% - 550px);  /* adjust based on viewer width */
  top:50%;

  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:15px;

  z-index:3;
  pointer-events:none;

  animation:floatUI 5s ease-in-out infinite;
}


/* CONNECTOR LINE */
.instr-line{
  width:2px;
  height:100px;

  background:linear-gradient(
    to bottom,
    transparent,
    rgba(0,255,255,0.9),
    transparent
  );

  box-shadow:0 0 12px rgba(0,255,255,0.6);
}

/* TEXT */
.instr-text{
  text-align:left;
  color:#00eaff;
  max-width:220px;

  text-shadow:0 0 10px rgba(0,255,255,0.3);
}

/* LABEL */
.instr-text .label{
  font-size:11px;
  letter-spacing:2px;
  opacity:0.6;
}

/* MAIN TEXT */
.instr-text p{
  font-size:14px;
  margin-top:5px;
  line-height:1.4;
}

/* FLOAT ANIMATION */
@keyframes floatUI{
  0%{ transform:translateY(-50%) translateY(0px); }
  50%{ transform:translateY(-50%) translateY(-10px); }
  100%{ transform:translateY(-50%) translateY(0px); }
}







/* subtle direction hint */
.instruction-ui::after{
  content:"";
  position:absolute;
  right:-80px;
  top:50%;
  width:80px;
  height:1px;

  background:linear-gradient(
    to right,
    rgba(0,255,255,0.6),
    transparent
  );

  animation:lineMove 2s infinite;
}

@keyframes lineMove{
  0%{ opacity:0.2; }
  50%{ opacity:1; }
  100%{ opacity:0.2; }
}





.card-buttons{
  display:flex;
  gap:8px;
  justify-content:center;
}

.linkedin-btn{
  padding:8px 12px;
  border-radius:50%;
  border:1px solid rgba(0,255,255,0.4);
  background:rgba(0,255,255,0.08);
  color:#00eaff;
  font-size:12px;
  cursor:pointer;
  transition:0.3s;
}

.linkedin-btn:hover{
  background:#00eaff;
  color:#000;
  box-shadow:0 0 15px rgba(0,255,255,0.6);
}



/* =========================
   CENTER BRAND TITLE (SECTION)
========================= */


.brand-title-center{
  font-family:'Orbitron', sans-serif;

  font-size:108px;
  font-weight:800;

  text-align:center;
  letter-spacing:5px;

  margin-top:60px;

  /* clean premium gradient */
  background:linear-gradient(90deg,#00eaff,#00ffcc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  /* soft glow only */
  text-shadow:
    0 0 12px rgba(0,255,255,0.25),
    0 0 25px rgba(0,255,255,0.15);
}


.menu-particles span{
  opacity:0.2; /* 👈 reduced */

  box-shadow:
    0 0 4px rgba(0,255,255,0.4),
    0 0 8px rgba(0,255,255,0.2);

  width:3px;
  height:3px;
}




/* =========================
   BRAND TAGLINE
========================= */
.brand-tagline{
  animation:fadeGlow 2s ease forwards;
}

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

/* TAGLINE BASE */
.brand-tagline{
  text-align:center;
  font-size:16px;
  letter-spacing:2px;

  margin-top:10px;
  margin-bottom:40px;

  color:rgba(0,255,255,0.7);
}

/* HIGHLIGHT WORDS */
.highlight{
  color:#00eaff;   /* main neon color */
  font-weight:600;

  text-shadow:
    0 0 10px rgba(0,255,255,0.6),
    0 0 20px rgba(0,255,255,0.3);
}



/* =========================
   ICON VARIANTS (VFX STYLE)
========================= */

/* base icon */
.contact-card .icon{
  font-size:32px;
  margin-bottom:10px;
  position:relative;
}

/* node style (Houdini feel) */
.node-icon{
  color:#00eaff;
  text-shadow:
    0 0 10px #00eaff,
    0 0 25px rgba(0,255,255,0.6);
}

/* energy core */
.energy-icon{
  color:#00ffcc;
  text-shadow:
    0 0 10px #00ffcc,
    0 0 30px rgba(0,255,200,0.7);
}

/* lens / camera */
.lens-icon{
  color:#ff00cc;
  text-shadow:
    0 0 10px #ff00cc,
    0 0 30px rgba(255,0,200,0.6);
}


/* =========================
   PHONE CONTACT
========================= */

/* spacing balance */
.contact-node-system{
  margin-bottom:30px;
}

.contact-numbers{
  margin-top:10px;
  margin-bottom:30px;
}

.phone-card{
  backdrop-filter:blur(8px);
  letter-spacing:0.5px;
}

/* =========================
   CONTACT ICON LAYOUT (DYNAMIC)
========================= */

.contact-icons-big{
  position:relative;
  width:100%;
  max-width:500px;
  margin:40px auto;
  height:260px;
}

/* base positioning */
.contact-card{
  position:absolute;
}

/* LINKEDIN */
.contact-card:nth-child(1){
  top:0;
  left:0;
}

/* WHATSAPP (center focus) */
.contact-card:nth-child(2){
  top:60px;
  left:50%;
  transform:translateX(-50%) scale(1.15);
  z-index:2;
}

/* INSTAGRAM */
.contact-card:nth-child(3){
  top:0;
  right:0;
}

.phone-card{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 18px;

  border-radius:30px;
  cursor:pointer;

  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.3);

  transition:0.3s;
}

/* hover glow */
.phone-card:hover{
  transform:scale(1.05);

  box-shadow:
    0 0 20px rgba(0,255,255,0.6);
}

/* icon */
.phone-icon{
  font-size:18px;
  color:#00eaff;

  text-shadow:
    0 0 10px rgba(0,255,255,0.8);
}





/* =========================
   SOCIAL SVG ICON STYLING
========================= */

/* base svg */
.node svg{
  width:30px;
  height:30px;
  fill:#00eaff;
  transition:0.3s;
}

/* LinkedIn */
.node-linkedin:hover svg{
  fill:#0a66c2;
  filter:
    drop-shadow(0 0 10px #0a66c2)
    drop-shadow(0 0 20px #0a66c2);
}

/* WhatsApp */
.node-whatsapp:hover svg{
  fill:#25D366;
  filter:
    drop-shadow(0 0 10px #25D366)
    drop-shadow(0 0 20px #25D366);
}

/* Instagram */
.node-instagram:hover svg{
  fill:#ff2a6d;
  filter:
    drop-shadow(0 0 10px #ff2a6d)
    drop-shadow(0 0 20px #ff2a6d);
}




/* =========================
   NODE CONTACT SYSTEM
========================= */

.contact-node-system{
  position:relative;
  width:420px;
  height:260px;
  margin:40px auto 30px auto;
}

/* nodes */
.node{
  position:absolute;
  width:90px;
  height:90px;

  border-radius:50%;
  cursor:pointer;

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

  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.3);

  backdrop-filter:blur(6px);

  transition:0.4s;
}

/* label */
.node span{
  font-size:11px;
  margin-top:6px;
  opacity:0.75;
  letter-spacing:1px;
}

/* positions */
.node-linkedin{
  top:0;
  left:0;
}

.node-whatsapp{
  top:90px;
  left:50%;
  transform:translateX(-50%) scale(1.2);
  z-index:2;
}

.node-instagram{
  top:0;
  right:0;
}

/* hover */
.node:hover{
  transform:scale(1.2);
  box-shadow:
    0 0 20px rgba(0,255,255,0.6),
    0 0 40px rgba(0,255,255,0.3);
}

/* subtle pulse (premium feel) */
@keyframes nodePulse{
  0%{ box-shadow:0 0 10px rgba(0,255,255,0.2); }
  50%{ box-shadow:0 0 25px rgba(0,255,255,0.5); }
  100%{ box-shadow:0 0 10px rgba(0,255,255,0.2); }
}

.node{
  animation:nodePulse 3s infinite;
}



/* ======================================================
   CONTACT FINAL SYSTEM
====================================================== */

/* ===== NODE SYSTEM ===== */

.contact-node-system{
  position:relative;
  width:420px;
  height:260px;
  margin:40px auto 30px auto;
}

.node{
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  cursor:pointer;

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

  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.3);
  backdrop-filter:blur(6px);

  transition:0.4s;
}

/* SVG */
.node svg{
  width:30px;
  height:30px;
  fill:#00eaff;
  transition:0.3s;
}

/* LABEL */
.node span{
  font-size:11px;
  margin-top:6px;
  opacity:0.75;
  letter-spacing:1px;
}

/* POSITIONS */
.node-linkedin{
  top:0;
  left:0;
}

.node-whatsapp{
  top:90px;
  left:50%;
  transform:translateX(-50%) scale(1.2);
  z-index:2;
}

.node-instagram{
  top:0;
  right:0;
}

/* HOVER + BRAND COLORS */
.node:hover{
  transform:scale(1.2);
  box-shadow:
    0 0 20px rgba(0,255,255,0.6),
    0 0 40px rgba(0,255,255,0.3);
}

.node-linkedin:hover svg{
  fill:#0a66c2;
}

.node-whatsapp:hover svg{
  fill:#25D366;
}

.node-instagram:hover svg{
  fill:#ff2a6d;
}

/* SUBTLE PULSE */
@keyframes nodePulse{
  0%{ box-shadow:0 0 10px rgba(0,255,255,0.2); }
  50%{ box-shadow:0 0 25px rgba(0,255,255,0.5); }
  100%{ box-shadow:0 0 10px rgba(0,255,255,0.2); }
}

.node{
  animation:nodePulse 3s infinite;
}


/* ===== BOTTOM LAYOUT ===== */

.contact-bottom{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:40px;
  margin-top:30px;
}

/* LEFT (PHONE) */
.contact-left{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* CENTER (EMAIL) */
.contact-center{
  display:flex;
  justify-content:center;
}

/* RIGHT (FORM) */
.contact-right{
  display:flex;
  justify-content:flex-end;
}


/* ===== PHONE CARDS ===== */

.phone-card{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;

  width:auto;
  max-width:220px;

  border-radius:20px;
  cursor:pointer;

  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.25);

  font-size:13px;
  letter-spacing:0.5px;

  transition:0.3s;
}

.phone-card:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(0,255,255,0.6);
}

.phone-icon{
  font-size:16px;
  color:#00eaff;
}


/* ===== EMAIL CARD ===== */

.email-card{
  padding:10px 18px;

  border-radius:25px;
  cursor:pointer;

  background:rgba(0,255,255,0.05);
  border:1px solid rgba(0,255,255,0.3);

  font-size:13px;

  transition:0.3s;
}

.email-card:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(0,255,255,0.6);
}


/* ===== FORM ALIGN FIX ===== */

.contact-form{
  max-width:320px;
}




/* =========================
   CONTACT FORM (PREMIUM V2)
========================= */

.contact-form{
  width:100%;
  max-width:360px;

  display:flex;
  flex-direction:column;
  gap:14px;
}

/* row */
.form-row{
  display:flex;
  gap:12px;
}

/* inputs */
.contact-form input,
.contact-form textarea{
  flex:1;

  padding:11px 14px;

  border-radius:10px;
  border:1px solid rgba(0,255,255,0.25);

  /* 🔥 controlled opacity (glass feel) */
  background:rgba(0, 15, 25, 0.45);

  color:#ffffff;

  font-size:13px;
  letter-spacing:0.5px;

  backdrop-filter: blur(6px);

  transition:0.3s;
}

/* placeholder */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,0.5);
}

/* textarea */
.contact-form textarea{
  min-height:100px;
  resize:none;
}

/* focus glow */
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;

  background:rgba(0.5, 25, 45, 0.7);

  border-color:#00eaff;

  box-shadow:
    0 0 12px rgba(0,255,255,0.6),
    0 0 25px rgba(0,255,255,0.2);
}

/* button */
.form-btn{
  margin-top:10px;

  padding:11px;

  border:none;
  border-radius:4px;

  background:linear-gradient(90deg,#00eaff,#00ffcc);
  color:#000;

  font-weight:600;
  letter-spacing:1px;

  cursor:pointer;

  transition:0.3s;
}

/* hover */
.form-btn:hover{
  transform:scale(1.06);

  box-shadow:
    0 0 25px rgba(0,255,255,0.7),
    0 0 50px rgba(0,255,255,0.3);
}


/* =========================
   AI CONTENT LAYOUT (IMPORTANT)
========================= */

.ai-content-grid{
  display:grid;

  /* 👇 main big, ads small */
  grid-template-columns: 3fr 0.8fr;

  gap:30px;
  align-items:start;
}


/* =========================
   MAIN AI PLAYER
========================= */

.ai-player-fancy{
  position:relative;

  max-width:100%; /* 👈 IMPORTANT (not 400px anymore) */
  margin:40px auto;

  border-radius:16px;
  overflow:hidden;

  border:1px solid rgba(0,255,255,0.2);

  backdrop-filter:blur(10px);

  box-shadow:
    0 0 30px rgba(0,255,255,0.2),
    0 0 80px rgba(0,255,255,0.1);

  transition:0.4s;
}

/* =========================
   MAIN AI PLAYER (75% WIDTH)
========================= */

.ai-player-fancy{
  position:relative;

  width:75%;              /* 👈 EXACT 75% WIDTH */
  max-width:100%;         /* safety */

  margin:40px auto;       /* center */

  border-radius:16px;
  overflow:hidden;

  border:1px solid rgba(0,255,255,0.2);

  backdrop-filter:blur(0px);

  box-shadow:
    0 0 30px rgba(0,255,255,0.2),
    0 0 80px rgba(0,255,255,0.1);

  transition:0.4s;
}


/* =========================
   KEEP PERFECT RATIO
========================= */

.ai-player-fancy iframe,
.player-cover{
  width:100%;

  aspect-ratio:16 / 9;   /* 👈 FIXES HEIGHT ISSUE */

  height:auto;
  object-fit:cover;
}


/* hide iframe initially */
.ai-player-fancy iframe{
  display:none;
}


/* =========================
   OVERLAY
========================= */

.player-overlay{
  position:absolute;
  inset:0;

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

  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(0px);

  cursor:pointer;
}


/* =========================
   HOVER GLOW
========================= */

.ai-player-fancy:hover{
  box-shadow:
    0 0 10px rgba(0,255,255,0.6),
    0 0 20px rgba(0,255,255,0.2);
}
/* =========================
   AI ADS (RIGHT SIDE)
========================= */

.ai-sub{
  max-width:320px; /* 👈 WIDTH CONTROL (VERY IMPORTANT) */
  width:100%;
  margin:0 auto;
}

.ai-ads-fancy{
  position:relative;

  border-radius:12px;
  overflow:hidden;

  border:1px solid rgba(0,255,255,0.2);

  box-shadow:0 0 20px rgba(0,255,255,0.2);

  transition:0.3s;
}

/* 👇 ADS SIZE CONTROL */
.ads-cover,
.ai-ads-fancy iframe{
  width:100%;
  height:420px; /* 👈 SMALLER THAN MAIN */
  object-fit:cover;
}

/* hide iframe initially */
.ai-ads-fancy iframe{
  display:none;
}

/* overlay */
.ads-overlay{
  position:absolute;
  inset:0;

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

  background:rgba(0,0,0,0.5);
  cursor:pointer;
}

/* hover */
.ai-ads-fancy:hover{
  transform:scale(1.03);

  box-shadow:
    0 0 25px rgba(0,255,255,0.4),
    0 0 50px rgba(0,255,255,0.2);
}




/* =========================
   Menu Glow
========================= */

nav a::before{
  content:"";
  position:absolute;

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

  background:linear-gradient(
    120deg,
    transparent,
    rgba(0,255,255,0.12), /* 👈 reduced from 0.4 */
    transparent
  );

  opacity:0.6; /* 👈 soft visibility */
}


nav a:nth-child(1)::before{ animation: shimmerMove 6s infinite 1s; }
nav a:nth-child(2)::before{ animation: shimmerMove 7s infinite 2s; }
nav a:nth-child(3)::before{ animation: shimmerMove 8s infinite 0.5s; }
nav a:nth-child(4)::before{ animation: shimmerMove 6.5s infinite 1.5s; }
nav a:nth-child(5)::before{ animation: shimmerMove 7.5s infinite 2.2s; }
nav a:nth-child(6)::before{ animation: shimmerMove 8.5s infinite 0.8s; }
nav a:nth-child(7)::before{ animation: shimmerMove 7s infinite 1.8s; }
nav a:nth-child(8)::before{ animation: shimmerMove 6.8s infinite 2.5s; }

nav a::before{
  opacity:0;
}

nav a:hover::before{
  opacity:1;
  animation: shimmerMove 1.5s ease;
}

/* =========================
   Particles
========================= */

.menu-particles span{
  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

  /* core + glow */
  background:radial-gradient(circle, #00eaff 40%, transparent 70%);

  opacity:0.4;

  box-shadow:
    0 0 6px rgba(0,255,255,0.8),
    0 0 12px rgba(0,255,255,0.5),
    0 0 20px rgba(0,255,255,0.2);

  animation:
    floatBee linear infinite,
    glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse{
  0%{
    opacity:0.2;
    transform:scale(0.8);
  }
  50%{
    opacity:0.6;
    transform:scale(1.2);
  }
  100%{
    opacity:0.3;
    transform:scale(1);
  }
}

@keyframes floatBee{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(10px,-15px); }
  50%{ transform:translate(-5px,-30px); }
  75%{ transform:translate(15px,-10px); }
  100%{ transform:translate(0,0); }
}

opacity:0.25;
box-shadow:0 0 8px rgba(0,255,255,0.3);



/* =========================================
   MOBILE HERO (DESKTOP STYLE PRESERVED)
========================================= */

@media (max-width:768px){

  .hero-hub{
    display:grid;

    grid-template-columns: 1fr 260px 1fr; /* 👈 iPhone perfect */
    gap:10px;

    height:auto;
    padding-top:110px;
  }

  /* CENTER IMAGE */
  .center-artist{
    transform:none;
  }

  .center-artist img{
    width:260px;
  }

  /* PANELS SMALLER */
  .panel{
    width:160px;
  }

  .panel img{
    height:100px;
  }

  /* REMOVE 3D ROTATION (VERY IMPORTANT) */
  .panel-fx1,
  .panel-fx2,
  .panel-nodes,
  .panel-showreel{
    transform:none;
  }

  /* TEXT SCALE */
  .hero-title{
    font-size:22px;
    line-height:1.2;
    text-align:center;
  }

  .hero-sub{
    font-size:13px;
    text-align:center;
  }

  /* NAV (keep your existing one but ensure this) */
  nav{
    width:90%;
    max-width:500px;
    left:50%;
    transform:translateX(-50%);
  }

  body{
    overflow-x:hidden;
    padding-bottom:90px;
  }

}




@media (max-width:768px){

  /* HIDE SIDE PANELS */
  .panel-fx1,
  .panel-fx2,
  .panel-roto,
  .panel-nodes,
  .panel-ai2,
  .panel-comp{
    display:none;
  }

}

@media (max-width:768px){

  .hero-hub{
    display:flex;
    flex-direction:column;
    align-items:center;

    height:auto;
    padding:120px 15px 40px;
    gap:20px;
  }

  .center-artist{
    transform:none;
    text-align:center;
  }

  .center-artist img{
    width:90%;
    max-width:300px;
    margin:auto;
  }

}
@media (max-width:768px){

  .panel{
    display:block;
    width:100%;
    max-width:320px;
    margin:10px auto;
  }

}


@media (max-width:768px){

  .brand-title-center{
    font-size:42px;
    line-height:1.2;
    letter-spacing:2px;

    padding:0 10px;
    word-break:break-word; /* 🔥 prevents cropping */
  }

}


.ba-container{
  touch-action: none; /* 🔥 REQUIRED */
}

body{
  padding-bottom:90px;
}






@media (max-width:768px){

  .ai-content-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  /* MAIN PLAYER FULL WIDTH */
  .ai-player-fancy{
    width:100%;
    max-width:320px;
  }

  /* AD SAME SIZE (NOT TALL) */
  .ai-ads-fancy{
    width:100%;
    max-width:320px;
  }

  /* FIX AD HEIGHT */
  .ads-cover,
  .ai-ads-fancy iframe{
    height:auto;
    aspect-ratio:16/9; /* 👈 IMPORTANT */
  }

}



/* =========================
   FINAL MOBILE NAV STYLE
========================= */

@media (max-width:768px){

  nav{
    position:fixed !important;

    bottom:20px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    flex-direction:row;

    gap:8px;

    padding:8px 10px;

    border-radius:22px;

    background:rgba(0,10,20,0.75);
    backdrop-filter:blur(10px);

    border:1px solid rgba(0,255,255,0.2);

    width:auto !important;
  }

  nav a{
    padding:8px 12px;

    font-size:11px;

    background:rgba(0,255,255,0.05);

    border:1px solid rgba(0,255,255,0.2);

    color:#00eaff;

    /* 🔥 UNIQUE SHAPE */
    border-radius:14px 4px 14px 4px;

    transition:0.3s;
  }

  /* 🔥 DIFFERENT SHAPES PER BUTTON */
  nav a:nth-child(1){ border-radius:18px 6px 18px 6px; }
  nav a:nth-child(2){ border-radius:6px 18px 6px 18px; }
  nav a:nth-child(3){ border-radius:20px 4px 20px 4px; }
  nav a:nth-child(4){ border-radius:4px 20px 4px 20px; }
  nav a:nth-child(5){ border-radius:16px 8px 16px 8px; }

  /* HOVER / ACTIVE */
  nav a:hover,
  nav a:active{
    background:rgba(0,255,255,0.15);

    box-shadow:0 0 10px rgba(0,255,255,0.4);

    transform:scale(0.95);
  }

}



/* =========================
   FINAL MOBILE NAV (CLEAN FIXED)
========================= */

@media (max-width:768px){

  nav{
    position:fixed !important;

    bottom:12px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    flex-wrap:nowrap;

    gap:6px;

    padding:6px 8px;

    border-radius:18px;

    background:rgba(0,10,20,0.7);
    backdrop-filter:blur(8px);

    border:1px solid rgba(0,255,255,0.2);

    z-index:9999;

    max-width:95vw;   /* 👈 fits screen */
    overflow-x:auto;  /* 👈 scroll if needed */
  }

  /* SMALL BUTTONS */
  nav a{
    flex:0 0 auto;   /* 👈 prevents squeezing */

    font-size:10px;
    padding:6px 8px;

    white-space:nowrap;

    border-radius:12px;

    background:rgba(0,255,255,0.05);
    border:1px solid rgba(0,255,255,0.2);

    color:#00eaff;
  }

  /* CLEAN HOVER / TAP */
  nav a:active{
    transform:scale(0.92);
    background:rgba(0,255,255,0.15);
  }

}



/* =========================
   NAV ORBIT PERFECT CENTER
========================= */

.nav-orbit{
  position:fixed;
  top:50%;
  left:40px;
  transform:translateY(-40%);

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

  width:260px;
  height:360px;

  z-index:9999;
}

/* NAV BOX CENTER */
.nav-orbit nav{
  position:relative;
  z-index:2;

  width:180px;
  padding:18px;

  border-radius:18px;

  background:rgba(0,10,20,0.6);
  border:1px solid rgba(0,255,255,0.2);

  display:flex;
  flex-direction:column;
  gap:12px;
}

/* =========================
   ORBIT RING (ALIGNED + CLEAN)
========================= */

.orbit-ring{
  position:absolute;

  top:64%;
  left:57%;
  transform:translate(-50%, -50%);

  width:260px;
  height:260px; /* perfect circle */

  border-radius:50%;

  border:1.5px solid rgba(0,255,150,0.4);

  box-shadow:
    0 0 12px rgba(0,255,150,0.25),
    0 0 30px rgba(0,255,150,0.1);

  animation:orbitPulse 5s ease-in-out infinite;
}


/* =========================
   SPACESHIP
========================= */

.spaceship{
  position:absolute;

  top:50%;
  left:50%;

  width:96px;
  height:96px;

  transform-origin:center;

  filter:drop-shadow(0 0 2px rgba(0,255,180,0.25));

  animation:orbitMove 10s linear infinite;
}

.spaceship img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

/* =========================
   ORBIT MOTION
========================= */

@keyframes orbitMove{
  0%{
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      translateX(130px)
      rotate(90deg); /* 👈 FACE FORWARD */
  }

  100%{
    transform:
      translate(-50%, -50%)
      rotate(360deg)
      translateX(130px)
      rotate(150deg); /* 👈 360 + 90 */
  }
}

/* =========================
   SMOKE / FIRE TRAIL
========================= */

.smoke{
  position:absolute;

  width:2px;   /* 👈 bigger source */
  height:2px;

  border-radius:50%;

  background:radial-gradient(circle,
    rgba(40,180,200,0.9) 0%,
    rgba(40,180,200,0.2)40%,
    rgba(40,180,200,0.1) 70%,
    transparent 100%
  );

  pointer-events:none;

  z-index:1;

  filter:blur(3px); /* softer, more spread */

  animation:smokeFade 1.4s linear forwards;
}


@keyframes smokeFade{
  0%{
    opacity:0.9;
    transform:scale(0.6);
  }

  50%{
    opacity:0.6;
    transform:translate(-15px, -5px) scale(1.3);
  }

  100%{
    opacity:0;
    transform:translate(-35px, 8px) scale(2.5);
  }
}

setInterval(createSmoke, 100); // 👈 fewer particles


/* =========================
   ORBIT BREATH
========================= */

@keyframes orbitPulse{
  0%{
    box-shadow:
      0 0 10px rgba(0,255,150,0.2),
      0 0 25px rgba(0,255,150,0.08);
  }
  100%{
    box-shadow:
      0 0 16px rgba(0,255,150,0.3),
      0 0 40px rgba(0,255,150,0.12);
  }
}

/*mobile FX*/

/* =========================
   MOBILE CLEAN MODE
========================= */

@media (max-width:768px){

  .orbit-ring,
  .spaceship,
  .smoke{
    display:none !important;
  }

}


/*menu fix*/

/* =========================
   MOBILE HORIZONTAL NAV
========================= */

@media (max-width:768px){

  /* REMOVE ORBIT SYSTEM */
  .orbit-ring,
  .spaceship,
  .smoke{
    display:none !important;
  }

  /* NAV CONTAINER (BOTTOM CENTER) */
  .nav-orbit{
    position:fixed;

    bottom:12px;
    left:50%;
    transform:translateX(-58%);

    width:95%;
    max-width:420px;
    height:auto;

    z-index:9999;
  }

  /* NAV BAR */
  .nav-orbit nav{
    display:flex;
    flex-direction:row;          /* 👈 FORCE HORIZONTAL */
    justify-content:space-between;

    width:100%;
    padding:10px 12px;

    border-radius:20px;

    background:rgba(0,10,20,0.85);
    backdrop-filter:blur(10px);

    border:1px solid rgba(0,255,255,0.15);

    overflow-x:auto;             /* 👈 scroll if needed */
    white-space:nowrap;
  }

  /* NAV ITEMS */
  .nav-orbit nav a{
    flex:0 0 auto;               /* 👈 prevent stacking */
    
    font-size:12px;
    padding:6px 10px;

    text-align:center;
  }

  /* SPACE FOR NAV */
  body{
    padding-bottom:80px;
  }

}