:root{
      --bg-white: #ffffff;
      --bg-dark: #0d0729; /* deep navy */
      --panel: #0f1724;
      --accent: #9b8cff; /* light purple */
      --accent-2: #4ecdc4; /* teal */
      --muted: #98a6bd;
      --glass: rgba(255,255,255,0.03);
      font-family: Inter, system-ui, -apple-system, sans-serif;
    }

    html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-dark),#1e0057);color:#eef6ff}
    a{color:inherit}
.sticky-nav-container {
        position: fixed; 
        top: 0px;           
        z-index: 1000;    
       right:8%
        /* background-color: #071229;  */
      }
 .nav-sleek {
    position: static; /* <-- stays in normal flow, not sticky or fixed */
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 22px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    display: inline-flex;
  }

  .nav-sleek a {
    position: relative;
    color: #ddd;
    font-weight: 600;
    font-size: 0.94rem;
    letter-spacing: 0.3px;
    padding: 8px 10px;
    transition: all 0.35s ease;
        text-decoration: none;

  }

  /* underline animation */
  .nav-sleek a::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform: translateX(-50%);
    transition: width 0.35s ease;
    box-shadow: 0 0 6px var(--accent);
  }

  /* glowing hover */
  .nav-sleek a:hover,
  .nav-sleek a.active {
    color: #fff;
    text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-2);
    transform: translateY(-1px);
  }

  .nav-sleek a:hover::after,
  .nav-sleek a.active::after {
    width: 60%;
  }

  /* gradient text with full compatibility */
  .nav-sleek a:hover {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    background-clip: text;
    -webkit-background-clip: text;  /* Safari/Chrome */
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .nav-sleek a.active {
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff, 0 0 15px #ffffff;
  transition: all 0.3s ease-in-out;
}

  /* responsive tweak */
  @media (max-width: 768px) {
    .nav-sleek {
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
  }
    /* header */
    header{position:relative;top:0; z-index:900;background:linear-gradient(180deg, rgba(7,18,41,0.55), transparent);backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.02)}
    .brand{font-weight:800;letter-spacing:0.6px}

    /* hero */
    .hero{min-height:94vh;display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:center;padding:64px 6vw}
    .kicker{display:inline-block;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg, rgba(155,140,255,0.12), rgba(78,205,196,0.06));color:var(--accent);font-weight:800;margin-bottom:18px}
    h1{font-size:clamp(30px,4.4vw,56px);line-height:1.02;margin:0}
    .hero .highlight{background:linear-gradient(90deg,var(--accent) 0%, #5fd3da 70%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
    .lead{color:var(--muted);font-size:1.05rem;margin-top:18px}

    /* right card - interactive 3D-ish */
    .card-hero{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(124,108,255,0.02));padding:26px;border-radius:16px;border:1px solid rgba(255,255,255,0.04);box-shadow: 0 18px 50px rgba(8,10,20,0.6);transform-style:preserve-3d}
    .glow-sphere{width:160px;height:80px;border-radius:50%;background:radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.616), rgba(36, 2, 255, 0.582) 30%, rgba(103, 1, 161, 0.6) 60%);display:grid;place-items:center;font-weight:800}
    .card-hero:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgba(90, 1, 255, 0.521)}
    /* sections */
    section{padding:80px 6vw}
    .panel:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgb(25, 0, 255)}

    .panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:22px;border:1px solid rgba(255,255,255,0.03)}

    /* projects grid */
    .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:18px}
    .project{overflow:hidden;border-radius:12px; padding:18px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(124,108,255,0.01));border:1px solid rgba(255, 255, 255, 0.342);position:relative;transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s}
    .project:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgb(25, 0, 255)}
    .project .tag{position:absolute;font-size:.50rem; right:14px;top:14px;background:rgba(7,18,41,0.6);padding:6px 10px;border-radius:999px;font-weight:800;color:var(--accent)}
    .project h5{margin-top:10px;font-size:15px;}
    .project p{color:var(--muted);font-size:.95rem}

    /* futuristic timeline for future scope */
    .timeline{position:relative;padding-left:28px}
    .timeline:before{content:'';position:absolute;left:8px;top:8px;bottom:8px;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:4px}
    .timeline-item{position:relative;margin-bottom:22px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02)}
    .timeline-item:before{content:'';position:absolute;left:-20px;top:20px;width:12px;height:12px;border-radius:50%;background:#fff}

    /* contact grid */
    .contact-grid{display:grid;grid-template-columns:1fr 360px;gap:28px}

    /* @media (max-width:980px){
      .hero{grid-template-columns:1fr;padding:48px 5vw}
      .contact-grid{grid-template-columns:1fr}
      .nav-orbit{display:none;}
      .nav-fab{right:16px;bottom:16px}
    } */

#b-nav {
  background-color: #0084ff; /* A modern blue background color */
  color: rgb(255, 255, 255);              /* White text for good contrast */
  padding: 10px 20x;        /* More space inside the button */
  border-radius: 5px;        /* Slightly rounded corners */
  box-shadow: 0 2px 5px rgba(0, 4, 255, 0.2); /* A subtle shadow for depth */
  text-align: center;        /* Centers the text */
  text-decoration: none;     /* Ensures no underline if it was an <a> tag */
  display: inline-block;     /* Allows full control over size/padding */
  font-size: 16px;           /* Sets a readable font size */
  /* Add smooth transitions for hover effects */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; 
}

    /* small decorative */
    .micro{font-size:.82rem;color:var(--muted)}
    .duominds{font-size: 35px;font-weight: 900; color:#d392ff}