/* 🔥 SCROLL PROGRESS */

#scrollProgress {

  position: fixed;

  top: 0;
  left: 0;

  width: 0%;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #60a5fa
    );

  z-index: 9999;

  box-shadow:
    0 0 15px rgba(59,130,246,0.6);
}


.cursor-glow {

  position: fixed;

  width: 180px;
  height: 180px;

  opacity: 0.6;

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,0.15),
      transparent 70%
    );

  pointer-events: none;

  z-index: -1;

  border-radius: 50%;


  transition:
    transform 0.08s linear;
}


/* 🔥 NETWORK GLOW */

.network-glow {

  position: fixed;

  inset: 50% auto auto 50%;

  width: 280px;
  height: 280px;

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

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,0.06),
      transparent 72%
    );

  filter: blur(18px);

  opacity: 0.22;

  z-index: -2;

  animation:
    pulseGlow 18s ease-in-out infinite;

  pointer-events: none;

  will-change: transform;
}

@keyframes pulseGlow {

  0%,100% {

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

  }

  50% {

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

  }

}
body {
      font-family: 'Inter', sans-serif;
      color: #ffffff;
      background-color: #0f172a;
      margin: 0;
      padding: 0;
    }

    #tsparticles {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
    
#typed-text {
  line-height: 32px;
  overflow: hidden;
}

#fade-text {
  display: inline-block;
  min-width: 280px;
  height: 32px;
  line-height: 32px;
  transition: opacity 0.5s ease;
}
    .overlay {

  background:
    linear-gradient(
      to bottom,
      rgba(15,23,42,0.45),
      rgba(15,23,42,0.65)
    );

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;
}
    .profile-glow {

  box-shadow:
    0 0 20px rgba(59,130,246,0.30);

  animation:
    float 6s ease-in-out infinite;
}

   .glass-card::before {

  content: '';

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(59,130,246,0.015),
      transparent
    );

  opacity: 0.25;

  pointer-events: none;
}
.glass-card:hover::before {

  top: 100%;
  left: 100%;
}

    

   

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

   
   .glow-border {

  border:
    1px solid rgba(59,130,246,0.15);

  box-shadow:
    0 0 30px rgba(59,130,246,0.08);
}


.experience-card {

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;

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

  border-radius:
    18px;

  padding:
    20px;

  backdrop-filter:
    blur(4px);

  background:
    rgba(255,255,255,0.03);
}

.experience-card:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 0 25px rgba(59,130,246,0.12);

  border-color:
    rgba(59,130,246,0.18);
}

    .scroll-top-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #1e40af;
      color: white;
      padding: 10px 14px;
      border-radius: 50%;
      font-size: 20px;
      cursor: pointer;
      z-index: 50;
      box-shadow:
  0 0 15px rgba(59,130,246,0.18);
      display: none;
    }


/* 🔥 GLASS NAVBAR */


.logo-glow {

  animation:
    logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {

  0%,100% {

    text-shadow:
      0 0 10px rgba(59,130,246,0.4);
  }

  50% {

    text-shadow:
      0 0 25px rgba(59,130,246,0.9);
  }
}

.nav-glass {

  margin-top: 10px;

  width: fit-content;

  min-width: calc(100% - 24px);

  margin-left: auto;

  margin-right: auto;

  padding:
    12px 18px;

  border-radius:
    20px;

  background:
    rgba(15,23,42,0.55);

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

  backdrop-filter:
    blur(4px);

  box-shadow:
    0 0 30px rgba(0,0,0,0.15);
}

.nav-link {

  color:
    #cbd5e1;

  font-size:
    15px;

  transition:
    color 0.3s ease;

  position: relative;
}

.nav-link:hover {

  color:
    #60a5fa;
}

.nav-link::after {

  content: '';

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 0%;

  height: 2px;

  background:
    #60a5fa;

  transition:
    width 0.3s ease;
}

.nav-link:hover::after {

  width: 100%;
}

.nav-scrolled .nav-glass {

  background:
    rgba(15,23,42,0.82);

  border:
    1px solid rgba(59,130,246,0.12);

  box-shadow:
    0 6px 18px rgba(59,130,246,0.08);
}

    .scroll-top-btn:hover {

  background:
    rgba(59,130,246,0.85);

}

 /* FOOTER */

.footer-glow {

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

  box-shadow:
    inset 0 2px 10px rgba(59,130,246,0.08);
}

/* 🔥 MONITORING DASHBOARD */

.monitor-card {

  background:
    rgba(255,255,255,0.03);

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

  border-radius:
    20px;

  padding:
    24px;

  backdrop-filter:
    blur(5px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.monitor-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(59,130,246,0.4);

  box-shadow:
    0 0 25px rgba(59,130,246,0.18);
}

.monitor-bar {

  width:
    100%;

  height:
    12px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,0.08);

  overflow:
    hidden;
}

.monitor-fill {

  height:
    100%;

  width:
    50%;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #60a5fa
    );

  transition:
    width 1s ease;
}

.infra-status {

  background:
    rgba(255,255,255,0.04);

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

  border-radius:
    16px;

  padding:
    16px;

  text-align:
    center;

  color:
    #e2e8f0;

  backdrop-filter:
    blur(5px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.infra-status:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(59,130,246,0.4);

  box-shadow:
    0 0 20px rgba(59,130,246,0.15);
}


/* 🔥 STATS SECTION */

.stats-card {

  background:
    rgba(255,255,255,0.04);

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

  border-radius:
    20px;

  padding:
    35px 20px;

  text-align:
    center;

  backdrop-filter:
    blur(5px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;

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

.stats-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(59,130,246,0.5);

  box-shadow:
    0 10px 24px rgba(59,130,246,0.14);
}

.stats-card h3 {

  font-size:
    42px;

  font-weight:
    700;

  color:
    #60a5fa;

  margin-bottom:
    10px;
}

.stats-card p {

  color:
    #cbd5e1;

  font-size:
    15px;

  letter-spacing:
    0.5px;
}
/* 🔥 ENTERPRISE STACK WALL */

.stack-heading {

  color:
    white;

  font-size:
    26px;

  font-weight:
    700;

  margin-bottom:
    28px;

  text-align:
    center;

  letter-spacing:
    0.5px;
}
/* 🔥 HERO GRADIENT TEXT */

.hero-gradient-text {

  background:
    linear-gradient(
      90deg,
      #60a5fa,
      #38bdf8,
      #818cf8
    );

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  background-size:
    200% auto;

  animation:
    gradientMove 5s linear infinite;
}

@keyframes gradientMove {

  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.stack-wall {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    18px;
}

.stack-pill {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    14px 20px;

  border-radius:
    999px;

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

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

  color:
    #e2e8f0;

  font-weight:
    500;

  backdrop-filter:
    blur(6px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;

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

.stack-pill:hover {

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

  border-color:
    rgba(59,130,246,0.45);

  color:
    white;

  box-shadow:
    0 8px 18px rgba(59,130,246,0.14);
}

/* 🔥 SOC SECTION */

.soc-panel {

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

  border:
    1px solid rgba(59,130,246,0.12);

  border-radius:
    20px;

  padding:
    24px;

  backdrop-filter:
    blur(5px);
}

.soc-title {

  font-size:
    22px;

  font-weight:
    700;

  margin-bottom:
    20px;

  color:
    white;
}

.soc-logs {

  height:
    350px;

  overflow:
    hidden;

  font-family:
    monospace;
}

.soc-line {

  margin-bottom:
    14px;

  color:
    #cbd5e1;

  opacity:
    0;

  transform:
    translateY(10px);

  animation:
    fadeFeed 0.4s forwards;
}

.soc-time {

  color:
    #60a5fa;

  margin-right:
    8px;
}

.soc-stat {

  background:
    rgba(255,255,255,0.04);

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

  border-radius:
    18px;

  padding:
    20px;

  text-align:
    center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;

  backdrop-filter:
    blur(5px);
}

.soc-stat:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(59,130,246,0.4);

  box-shadow:
    0 0 20px rgba(59,130,246,0.18);
}

.soc-stat h4 {

  margin-bottom:
    10px;

  color:
    #93c5fd;
}

.soc-stat p {

  font-size:
    22px;

  font-weight:
    bold;

  color:
    white;
}

/* 🔥 CASE STUDIES */

.case-card {

  background:
    rgba(255,255,255,0.04);

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

  border-radius:
    22px;

  padding:
    24px;

  backdrop-filter:
    blur(5px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.case-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(59,130,246,0.45);

  box-shadow:
    0 0 25px rgba(59,130,246,0.18);
}

.case-tag {

  display:
    inline-block;

  background:
    rgba(59,130,246,0.12);

  color:
    #93c5fd;

  padding:
    7px 14px;

  border-radius:
    999px;

  font-size:
    13px;

  margin-bottom:
    18px;
}

.case-card h3 {

  color:
    white;

  font-size:
    22px;

  font-weight:
    700;

  margin-bottom:
    20px;
}

.case-section {

  margin-bottom:
    18px;

  color:
    #cbd5e1;

  line-height:
    1.7;
}

.case-section span {

  display:
    block;

  color:
    white;

  font-weight:
    600;

  margin-bottom:
    6px;
}

/* 🔥 INCIDENT SECTION */

.incident-card {

  background:
    rgba(255,255,255,0.03);

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

  border-radius:
    20px;

  padding:
    28px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;

  backdrop-filter:
    blur(5px);

  position:
    relative;

  overflow:
    hidden;
}
.incident-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(59,130,246,0.4);

  box-shadow:
    0 0 35px rgba(59,130,246,0.18);

}

.incident-tag {

  display: inline-block;

  padding:
    6px 14px;

  border-radius:
    999px;

  background:
    rgba(59,130,246,0.12);

  color:
    #93c5fd;

  font-size:
    13px;

  margin-bottom:
    18px;
}

.incident-card h3 {

  font-size:
    22px;

  font-weight:
    700;

  margin-bottom:
    16px;

  color:
    white;
}

.incident-card p {

  color:
    #cbd5e1;

  line-height:
    1.8;

  margin-bottom:
    20px;
}

.incident-card ul {

  list-style:
    none;

  padding:
    0;

  margin:
    0;
}


/* 🔥 TOPOLOGY SECTION */

.topology-wrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;
}

.topology-node {

  padding:
    16px 30px;

  border-radius:
    18px;

  font-weight:
    600;

  color:
    white;

  backdrop-filter:
    blur(5px);

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

  margin:
    10px 0;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.topology-node:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 8px 18px rgba(59,130,246,0.14);

}

.internet {

  background:
    rgba(59,130,246,0.10);

  border:
    1px solid rgba(59,130,246,0.20);

  box-shadow:
    0 0 20px rgba(59,130,246,0.10);
}

.firewall {

  background:
    rgba(239,68,68,0.08);

  border:
    1px solid rgba(239,68,68,0.18);

  box-shadow:
    0 0 20px rgba(239,68,68,0.08);
}

.switch {

  background:
    rgba(16,185,129,0.08);

  border:
    1px solid rgba(16,185,129,0.18);

  box-shadow:
    0 0 20px rgba(16,185,129,0.08);
}

.topology-line {

    position: relative;

  width:
    3px;

  height:
    40px;

  background:
    linear-gradient(
      to bottom,
      #60a5fa,
      transparent
    );
}

.packet {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    #60a5fa;

  position:
    absolute;

  left:
    -3px;

  animation:
    movePacket 2s linear infinite;

  box-shadow:
    0 0 12px #60a5fa;
}

@keyframes movePacket {

  0% {
    transform:
      translateY(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform:
      translateY(40px);
    opacity: 0;
  }
}

.topology-grid {

  display:
    grid;

  grid-template-columns:
repeat(auto-fit,minmax(160px,1fr));

  gap:
    20px;

  width:
    100%;

  margin-top:
    40px;
}

.topology-child {

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.04);

  border-radius:
    18px;

  padding:
    24px;

  text-align:
    center;

  color:
    #e2e8f0;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;

  backdrop-filter:
    blur(5px);
}

.topology-child:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(59,130,246,0.4);

  box-shadow:
    0 10px 22px rgba(59,130,246,0.12);
}


/* 🔥 STATUS CARDS */

.status-card {

  background:
    rgba(255,255,255,0.04);

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

  border-radius:
    16px;

  padding:
    16px;

  color:
    #cbd5e1;

  backdrop-filter:
    blur(6px);

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.status-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(59,130,246,0.5);

  box-shadow:
    0 0 25px rgba(59,130,246,0.18);
}

.status-card strong {

  color:
    white;

  font-size:
    18px;
}

.status-dot {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    #22c55e;

  box-shadow:
    0 0 12px #22c55e;

  animation:
    blink 1.5s infinite;
}

@keyframes blink {

  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

     /* 🔥 AUTOMATION FEED */

.automation-feed {

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

  border:
    1px solid rgba(59,130,246,0.12);

  border-radius:
    18px;

  padding:
    20px;

  height:
    320px;

  overflow:
    hidden;

  position:
    relative;

  font-family:
    monospace;
}

.feed-line {

  color:
    #cbd5e1;

  margin-bottom:
    14px;

  opacity:
    0;

  transform:
    translateY(10px);

  animation:
    fadeFeed 0.5s forwards;
}

.feed-time {

  color:
    #60a5fa;

  margin-right:
    10px;
}

@keyframes fadeFeed {

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}

/* PREMIUM BUTTON */

/* HERO BUTTONS */

.hero-btn-primary {


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

  padding: 14px 28px;

  background: linear-gradient(
    135deg,
    #3b82f6,
    #2563eb
  );

  color: white;

  border-radius: 14px;

  font-weight: 600;

  transition:
  transform 0.3s ease,
  box-shadow 0.3s ease,
  background 0.3s ease,
  border-color 0.3s ease;

  box-shadow:
    0 6px 16px rgba(59,130,246,0.16);

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

.hero-btn-primary:hover {

  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(59,130,246,0.18);

}

.hero-btn-secondary {


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

  padding: 14px 24px;

  background: rgba(255,255,255,0.04);

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

  color: white;

  border-radius: 14px;

  backdrop-filter: blur(5px);

  transition:
  transform 0.3s ease,
  box-shadow 0.3s ease,
  border-color 0.3s ease,
  background 0.3s ease;
}

.hero-btn-secondary:hover {

  transform: translateY(-2px);

  border-color: rgba(59,130,246,0.5);

  box-shadow:
    0 6px 16px rgba(59,130,246,0.14);

}


/* 🔥 TERMINAL GLOW */

.terminal-glow {

  box-shadow:
    0 0 40px rgba(59,130,246,0.15),
    inset 0 0 20px rgba(59,130,246,0.08);

  transition:
    box-shadow 0.3s ease;
}
.terminal-glow:hover {

  box-shadow:
    0 0 24px rgba(59,130,246,0.12),
    inset 0 0 25px rgba(59,130,246,0.12);
}




@media (max-width: 767px) {

  .hero-btn-primary,
  .hero-btn-secondary {

    width: 100%;
  }
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ffffff, #e0e7ff);
  color: #1e3a8a;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,191,255,0.4);
  transition:
  transform 0.3s ease,
  box-shadow 0.3s ease,
  background 0.3s ease,
  color 0.3s ease;

  min-width: 220px;   /* 👈 change */
  text-align: center; /* 👈 add */
}

.btn-premium:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 18px rgba(0,191,255,0.22);
  background: linear-gradient(135deg, #ffffff, #dbeafe);
}



.section-glow {

  text-shadow:
    0 0 18px rgba(59,130,246,0.35);
}


/* 🔥 FLOATING LIGHT */

body::after {

  content: '';

  position: fixed;

  width: 220px;
  height: 220px;

  top: -80px;
  right: -80px;

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,0.05),
      transparent 75%
    );

  filter: blur(14px);

  opacity: 0.16;

  z-index: -6;

  pointer-events: none;
}
.company-logo {

  width: 28px;
  height: 28px;

  object-fit: contain;

  border-radius: 8px;
}
html {

  scroll-behavior: smooth;
}

.glass-card,
.monitor-card,
.case-card,
.incident-card,
.stats-card,
.hero-btn-primary,
.hero-btn-secondary,
.stack-pill,
.topology-child,
.topology-node {
  will-change: transform;
  transform: translateZ(0);
}

@media (max-width: 768px) {

  #tsparticles,
  .network-glow,
  body::after,
  .cursor-glow {
    display: none;
  }

  .glass-card,
  .monitor-card,
  .case-card,
  .incident-card,
  .soc-panel,
  .soc-stat,
  .topology-node,
  .topology-child,
  .status-card,
  .nav-glass {
    backdrop-filter: none !important;
  }

}

img {
  content-visibility: auto;
}

#mobileMenu {

  transition:
    all 0.3s ease;
}
  .experience-card:hover,
.case-card:hover,
.incident-card:hover {

  border-color:
    rgba(59,130,246,0.25);

}

  .live-dot {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #22c55e;

  box-shadow:
    0 0 8px #22c55e;

}


body::before {

  content: '';

  position: fixed;

  inset: 0;

  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);

  background-size: 40px 40px;

  z-index: -10;

  pointer-events: none;

}

@media (max-width: 768px) {

  body::before {

    opacity: 0.35;

  }

}

.experience-card:hover,
.case-card:hover,
.incident-card:hover {

  border-color:
    rgba(59,130,246,0.25);

  transform:
    translateY(-2px);

}