:root {
      --black: #0a0a0a;
      --dark-gray: #222;
      --gray: #555;
      --light-gray: #ddd;
      --white: #f9f9f9;
      --hero-bg: #000;
    }

    * {
      scroll-behavior: smooth;
    }

    body, html {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      background-color: var(--white);
      color: var(--black);
    }

    /* Sticky Floating Navbar */
    .floating-nav {
        position: sticky;
        top: 15px;
        background: rgba(10, 10, 10, 0.85);
        border-radius: 40px;
        padding: 8px 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.7);
        z-index: 9999;
        max-width: 900px;
        margin: 0 auto 20px auto; /* centers horizontally */
        width: fit-content;
        }

    .floating-nav .nav-link {
      color: var(--white) !important;
      font-weight: 600;
      margin: 0 14px;
      transition: color 0.3s;
    }
    .floating-nav .nav-link:hover {
      color: var(--light-gray) !important;
    }
    .floating-nav .navbar-toggler-icon {
      filter: invert(1);
    }

    /* --- HERO SECTION (UPDATED & CONSISTENT) --- */
header.hero {
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%); /* Subtle gradient for depth */
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left; /* Changed from 'center' to match your example image */
  position: relative;
  overflow: hidden;
  padding-top: 60px;
}

.hero-content {
  z-index: 1;
  max-width: 900px; /* Allow for longer, left-aligned text */
  padding: 0 2rem; /* More breathing room on the sides */
  margin-left: 2rem; /* Push the content block in from the left */
}

.hero-content h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900; /* Changed from 800 to 900 for maximum weight */
  margin-bottom: 0.75rem;
  line-height: 1;
  letter-spacing: -0.03em; /* This pulls the letters closer together */
  font-family: 'Inter', sans-serif; /* Explicitly stating it, though it's inherited */
}

.text-highlight {
  color: var(--accent); /* Now works! */
}

.hero-tagline {
  font-size: clamp(1.1rem, 3vw, 1.5rem); /* Responsive font size */
  font-weight: 400;
  color: var(--light-gray);
  margin-bottom: 1.5rem;
  line-height: 1.5;
  max-width: 700px;
}

.hero-current {
  font-size: 1.1rem;
  color: var(--gray);
  font-style: italic;
}
    
    header.hero {
      height: 100vh;
      background: var(--hero-bg);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      position: relative;
      overflow: hidden;
      padding-top: 60px; /* to avoid overlap with sticky nav */
    }

    .hero-content {
      z-index: 1;
      max-width: 600px;
      padding: 0 15px;
    }

    .hero img {
        width: 180px;
        height: 180px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: 20px;
        background-color: transparent;
        box-shadow: 0 0 15px 6px rgba(255, 255, 255, 0.1);
        border: 3px solid var(--white);
        }


    .hero h1 {
      font-size: 3.5rem;
      font-weight: 700;
      margin-bottom: 0.2rem;
    }

    .hero p {
      font-size: 1.3rem;
      margin-top: 10px;
      margin-bottom: 25px;
      color: var(--light-gray);
    }

    .btn-accent {
      background: var(--white);
      color: var(--hero-bg);
      border: none;
      padding: 12px 28px;
      font-weight: 600;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      transition: background-color 0.3s, color 0.3s;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .btn-accent:hover {
      background: var(--light-gray);
      color: var(--hero-bg);
    }

    /* Sections */
    section {
      padding: 80px 20px;
      max-width: 1000px;
      margin: 0 auto;
    }

    /* Section titles */
    .section-title {
      text-align: center;
      font-size: 2.25rem;
      font-weight: 700;
      margin-bottom: 50px;
      color: var(--black);
      letter-spacing: 1.1px;
    }

    /* Cards for projects and education */
    .card {
      border: 1px solid var(--light-gray);
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: var(--white);
    }

    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.15);
    }

    /* Skills list */
    .skills-list li {
      display: inline-block;
      background: var(--dark-gray);
      color: var(--white);
      padding: 12px 20px;
      margin: 8px;
      border-radius: 30px;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      font-size: 0.9rem;
      box-shadow: 0 3px 10px rgba(0,0,0,0.12);
      transition: background 0.3s;
    }

    .skills-list li:hover {
      background: var(--black);
      cursor: default;
    }

    /* Alternate section background */
    #skills, #contact {
      background-color: #f4f4f4;
    }  

    /* Form styling */
    form .form-label {
      font-weight: 600;
      color: var(--black);
    }
    form .form-control {
      border-radius: 8px;
      border: 1.5px solid var(--gray);
      transition: border-color 0.3s;
    }
    form .form-control:focus {
      border-color: var(--dark-gray);
      box-shadow: none;
    }

    /* Footer */
    footer {
      background: var(--black);
      color: var(--light-gray);
      text-align: center;
      padding: 25px 20px;
      font-size: 0.9rem;
    }
    footer a {
      color: var(--light-gray);
      text-decoration: none;
      margin: 0 8px;
      font-weight: 600;
    }
    footer a:hover {
      color: var(--white);
      text-decoration: underline;
    }

    .social-link {
  color: var(--dark-gray);
  transition: color 0.3s, transform 0.2s;
}

.social-link:hover {
  color: var(--black);
  transform: scale(1.2);
}

    /* Responsive tweaks */
    @media (max-width: 576px) {
      .hero h1 {
        font-size: 2.4rem;
      }
      .hero p {
        font-size: 1rem;
      }
      .floating-nav {
        padding: 8px 15px;
        max-width: 100%;
        border-radius: 0;
        left: 0;
        transform: none;
        top: 0;
      }
      .floating-nav .nav-link {
        margin: 0 8px;
        font-size: 0.9rem;
      }
    }