/* === NAVBAR GLASSMORPHISM === */
    .navbar-glass {
      background: rgba(0, 51, 80, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .nav-link {
      position: relative;
      display: block;
      padding: 0.5rem 1rem;
      margin: 0.25rem 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #f2f2f2 !important;
      transition: all 0.3s ease;
    }

    .navbar-nav .nav-link:hover {
      background: rgba(255, 255, 255, 0.2);
      color: #88a4ff !important;
    }

    /* Hamburger animat */
    .navbar-toggler {
      border: none;
      width: 32px;
      height: 24px;
      position: relative;
      outline: none !important;
      box-shadow: none !important;
      padding: 0;
    }

    .toggler-icon {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: white;
      border-radius: 2px;
      left: 0;
      transform: rotate(0deg);
      transition: all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .toggler-icon:nth-child(1) { top: 0; }
    .toggler-icon:nth-child(2) { top: 11px; }
    .toggler-icon:nth-child(3) { top: 22px; }

    .navbar-toggler:not(.collapsed) .toggler-icon:nth-child(1) {
      top: 11px;
      transform: rotate(45deg) scaleX(1.1);
    }
    .navbar-toggler:not(.collapsed) .toggler-icon:nth-child(2) {
      opacity: 0;
      transform: translateX(-20px);
    }
    .navbar-toggler:not(.collapsed) .toggler-icon:nth-child(3) {
      top: 11px;
      transform: rotate(-45deg) scaleX(1.1);
    }

    .navbar-toggler:hover .toggler-icon {
      box-shadow: 0 0 6px #88a4ff;
    }

    /* === LAYOUT GLOBAL === */
    body {
      background-color: #121212;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: "Segoe UI", sans-serif;
      padding-bottom: 80px;
      color: #fff;
      overflow: hidden;
      position: relative;
    }

    @media (min-width: 992px) {
      body {
        padding-bottom: 0;
        padding-left: 220px;
      }

      .navbar-glass {
        position: fixed;
        top: 7px;
        bottom: 0;
        left: 0;
        width: 220px;
        border-radius: 0 16px 16px 0;
        display: flex;
        align-items: center;
        padding-top: 1rem;
      }

      .navbar-brand {
        margin-bottom: 2rem;
        font-size: 1.4rem;
        font-weight: bold;
        color: #fff !important;
      }

      .navbar-collapse {
        flex-grow: 1;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
      }

      .navbar-nav {
        flex-direction: column !important;
        gap: 1rem;
        width: 100%;
      }

      .nav-item {
        width: 100%;
      }

      .nav-link {
        text-align: left;
        width: 100%;
        display: block;
        padding-left: 1.5rem;
      }

      .navbar-toggler {
        display: none;
      }
    }

    /* === HOME PAGE DESIGN === */
    .profile-pic {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #ffdd57;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      margin: 0 auto 20px;
      overflow: hidden;
    }

    h1 {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 5px;
      color: #fff;
    }

    .subtitle {
      color: #bbb;
      margin-bottom: 20px;
    }

    .social-icons a {
      display: inline-block;
      margin: 0 8px;
      font-size: 1.2rem;
      color: #f2f2f2;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #ff5757;
    }

    .hire-btn {
      margin-top: 25px;
      padding: 10px 28px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 25px;
      background: #ff5757;
      border: none;
      color: white;
      transition: background 0.3s;
    }

    .hire-btn:hover {
      background: #e94d4d;
    }

    /* === SHAPES ANIMATED === */
    .shapes {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
    }

    .shapes span {
      position: absolute;
      font-size: 1.4rem;
      color: rgba(255, 255, 255, 0.15);
      animation: float 6s ease-in-out infinite;
    }

    body {
        overflow: auto; /* permite scroll-ul paginii */
    }

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

    /* Plasare aleatorie a formelor */
    .shapes span:nth-child(1) { top: 10%; left: 15%; animation-duration: 5s; }
    .shapes span:nth-child(2) { top: 20%; right: 20%; animation-duration: 7s; }
    .shapes span:nth-child(3) { bottom: 15%; left: 10%; animation-duration: 6s; }
    .shapes span:nth-child(4) { bottom: 25%; right: 25%; animation-duration: 8s; }
    .shapes span:nth-child(5) { top: 40%; left: 30%; animation-duration: 9s; }
    .shapes span:nth-child(6) { bottom: 40%; right: 15%; animation-duration: 5s; }
    .shapes span:nth-child(7) { top: 60%; left: 20%; animation-duration: 10s; }
    .shapes span:nth-child(8) { bottom: 10%; right: 40%; animation-duration: 7s; }
    .shapes span:nth-child(9) { top: 15%; right: 10%; animation-duration: 11s; }
    .shapes span:nth-child(10) { bottom: 50%; left: 45%; animation-duration: 6s; }
    .shapes span:nth-child(11) { top: 70%; right: 30%; animation-duration: 9s; }
    .shapes span:nth-child(12) { bottom: 20%; left: 50%; animation-duration: 8s; }