section{
position:relative;
}

#jobs-ai,
#internships-ai,
#projects-ai{
pointer-events:none;
}

#jobs-ai,
#internships-ai,
#projects-ai{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}

/* HERO MATCH HOVER */
.btn-hero-hover {
  transition: all 0.3s ease;
}
.btn-hero-hover:hover {
  background: linear-gradient(135deg, #6366F1, #06B6D4);
  color: white !important;
  border-color: transparent;
  box-shadow: 0 0 20px rgba(99,102,241,0.5);
  transform: translateY(-2px);
}

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

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

body{
background:#0f172a;
color:#e2e8f0;
overflow-x:hidden;
}

.grid-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:40px 40px;
z-index:-5;
}

.glass{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.08);
}

.card-hover{
transition:all .35s ease;
}

.card-hover:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:
0 25px 50px rgba(0,0,0,.6),
0 0 25px rgba(30,95,255,.5),
0 0 60px rgba(30,95,255,.3);
border:1px solid #1E5FFF;
}

.avatar{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
}

.company-logo{
width:40px;
height:40px;
border-radius:8px;
object-fit:cover;
}

/* LIVE UPDATE EFFECT */
.live-pulse{
animation:pulseGlow 1.5s ease;
}

@keyframes pulseGlow{
0%{transform:scale(1);box-shadow:0 0 0 rgba(30,95,255,0)}
50%{transform:scale(1.05);box-shadow:0 0 25px rgba(30,95,255,.6)}
100%{transform:scale(1);box-shadow:0 0 0 rgba(30,95,255,0)}
}

.float{
animation:float 4s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

.fade-in{
animation:fadein 1s ease forwards;
opacity:0;
}

@keyframes fadein{
to{opacity:1; transform:translateY(0)}
}



/* ⏱ Animated circular clock */
.clock {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: conic-gradient(#06B6D4 0deg, rgba(255,255,255,0.1) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;
    position: absolute;
bottom: 8px;
right: 8px;
}

.clock span {
    position: absolute;
    font-size: 9px;
}




/* PREMIUM TABS */
.tab-btn-premium {
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5f5;
  transition: all .3s ease;
  backdrop-filter: blur(10px);
}

.tab-btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

.tab-btn-premium.active {
  background: linear-gradient(135deg,#6366F1,#06B6D4);
  color: white;
  box-shadow: 0 0 25px rgba(99,102,241,.6);
}

/* CONTENT ANIMATION */
.tab-content-premium {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.tab-content-premium.active {
  display: block;
  animation: fadeSlide .5s ease forwards;
}

@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* PRO TABS */
.tab-btn-pro {
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #cbd5f5;
  transition: .3s;
}

.tab-btn-pro.active {
  background: linear-gradient(135deg,#6366F1,#06B6D4);
  color: white;
  box-shadow: 0 0 20px rgba(99,102,241,.6);
}

/* CONTENT */
.tab-pro { display:none; }
.tab-pro.active { display:block; }

/* DASHBOARD */
.dashboard-card {
  background: rgba(255,255,255,0.05);
  padding: 20px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* TASK STATES */
.task {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.task.done { background: rgba(34,197,94,0.2); }
.task.progress { background: rgba(59,130,246,0.2); }
.task.pending { background: rgba(255,255,255,0.08); }

/* METRICS */
.metric-card {
  background: rgba(255,255,255,0.05);
  padding: 10px;
  border-radius: 12px;
  text-align: center;
}

.metric-card h5 {
  font-size: 20px;
  font-weight: bold;
}



/* TABS */
.tab-insane {
  padding:10px 20px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  transition:.3s;
}

.tab-insane.active {
  background:linear-gradient(135deg,#6366F1,#06B6D4);
  box-shadow:0 0 25px rgba(99,102,241,.7);
}

/* KANBAN */
.kanban {
  display:flex;
  gap:10px;
}

.column {
  flex:1;
  background:rgba(255,255,255,0.05);
  padding:10px;
  border-radius:12px;
}

.card {
  padding:8px;
  margin-top:6px;
  background:rgba(255,255,255,0.08);
  border-radius:6px;
  transition:.5s;
}

.card.done { background:rgba(34,197,94,.3); }

/* MOVING CARD */
.moving {
  animation: moveCard 4s infinite;
}

@keyframes moveCard {
  0% { transform:translateX(0); }
  50% { transform:translateX(120px); }
  100% { transform:translateX(0); }
}

/* LIVE FEED */
#live-feed div {
  animation: fadeIn .5s ease;
}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(-5px);}
  to {opacity:1;}
}

/* CURSOR GLOW */
/* removed glow */
#insane-section::before { opacity:0;
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(6,182,212,.2), transparent);
  pointer-events:none;
  transform:translate(-50%,-50%);
}

/* PROGRESS */
.progress-wrap {
  width:100%;
  height:10px;
  background:#1e293b;
  border-radius:10px;
}

.progress-bar {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#6366F1,#06B6D4);
  border-radius:10px;
  animation: load 4s infinite;
}

@keyframes load {
  0%{width:10%;}
  50%{width:80%;}
  100%{width:10%;}
}

/* PULSE */
.pulse-box {
  padding:20px;
  background:rgba(99,102,241,.12);
  border-radius:12px;
  animation:pulse 2s infinite;
}

@keyframes pulse {
  0%{transform:scale(1);}
  50%{transform:scale(1.03);}
  100%{transform:scale(1);}
}




.tab-insane-content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s ease;
}

.tab-insane-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


/* collapsed state */
#floating-live-feed.collapsed {
  height: 50px;
  overflow: hidden;
  cursor: pointer;
}

/* expanded */
#floating-live-feed.expanded {
  height: 300px;
}

/* smooth animation */
#floating-live-feed {
  transition: all 0.35s ease;
}

/* make ECG clickable */
#live-toggle {
  cursor: pointer;
}


#floating-live-feed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 260px;
  max-height: 300px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

#floating-live-feed h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: #22c55e;
}

#floating-feed-list div {
  font-size: 12px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  animation: slideIn .4s ease;
}

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


.live-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #22c55e;
}

/* 🔴 Pulse dot */
.pulse-dot {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
}

/* glowing ring */
.pulse-dot::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #22c55e;
  animation: pulseRing 1.5s infinite;
  opacity: 0.6;
}

/* animation */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.hero-insane {
  background:
    radial-gradient(circle at 20% 80%, rgba(99,102,241,0.35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(99,102,241,0.35), transparent 100%),
    linear-gradient(120deg, #020617 0%, #0f172a 40%, #020617 100%);
}


.footer-insane {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(99,102,241,0.25), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(6,182,212,0.25), transparent 40%),
    #020617;
}

.footer-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, white, transparent 80%);
}

.footer-insane > * {
  position: relative;
  z-index: 2;
}











.hero-insane::before,
.hero-insane::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  z-index: 0;
}
.hero-insane::before {
  background: #6366F1;
  top: -150px;
  left: -150px;
  animation: floatBlob 12s ease-in-out infinite;
}
.hero-insane::after {
  background: #06B6D4;
  bottom: -150px;
  right: -150px;
  animation: floatBlob 14s ease-in-out infinite;
}
@keyframes floatBlob {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-40px); }
}
.hero-insane > * { position: relative; z-index: 2; }

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, white, transparent 80%);
  z-index: 1;
}

.task-node {
  position: absolute;
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e2e8f0;
  animation: floatNode 6s ease-in-out infinite;
}
@keyframes floatNode {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

#task-lines path {
  stroke-dasharray: 6;
  animation: flowLine 2s linear infinite;
}
@keyframes flowLine {
  to { stroke-dashoffset: -20; }
}







.ecg {
  width: 40px;
  height: 14px;
  overflow: hidden;
}

.ecg svg {
  width: 200%;
  height: 100%;
}


.ecg path {
  stroke: #22c55e;
  filter: drop-shadow(0 0 6px #22c55e);

  fill: none;
  stroke: #22c55e;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;

  stroke-dasharray: 200;
  stroke-dashoffset: 200;

  animation: ecgMove 2s linear infinite;
}

@keyframes ecgMove {
  0% {
    stroke-dashoffset: 200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}



.ecg svg {
  width: 300%;
  animation: ecgScroll 3s linear infinite;
}

@keyframes ecgScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.33%);
  }
}

/* Animated Gradient Grid */
#gradient-grid{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-20;
pointer-events:none;
background-image:
linear-gradient(rgba(30,95,255,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(30,95,255,.15) 1px, transparent 1px);
background-size:60px 60px;
animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
0%{background-position:0 0,0 0}
100%{background-position:60px 60px,60px 60px}
}

/* Neural waves canvas */
#neural-waves{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-19;
pointer-events:none;
opacity:.4;
}

/* Brain mesh particles */
#brain-mesh{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-18;
pointer-events:none;
}


.animate-flow{animation:flow 3s linear infinite;}
@keyframes flow{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

.arrow{color:#06B6D4;animation:arrowMove 1.5s infinite;}
@keyframes arrowMove{
0%{opacity:0; transform:translateX(-5px);}
50%{opacity:1;}
100%{opacity:0; transform:translateX(5px);}
}