* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           scroll-behavior: smooth;
       }

       :root {
           --bg: #070711;
           --card: #10101c;
           --purple: #8b5cf6;
           --purple2: #c084fc;
           --text: #ffffff;
           --gray: #a1a1aa;
       }

       body {
           font-family: 'Inter', sans-serif;

           background:
               radial-gradient(circle at top left, rgba(139, 92, 246, .18), transparent 30%),
               radial-gradient(circle at bottom right, rgba(192, 132, 252, .12), transparent 35%),
               radial-gradient(circle at center, rgba(88, 28, 135, .08), transparent 40%),
               #070711;

           background-attachment: fixed;

           color: var(--text);
           overflow-x: hidden;
       }

       /* animated glow */

       body::before {
           content: '';
           position: fixed;
           inset: 0;
           z-index: -1;

           background:
               radial-gradient(circle at 20% 30%, rgba(139, 92, 246, .15), transparent 25%),
               radial-gradient(circle at 80% 70%, rgba(192, 132, 252, .10), transparent 25%);

           filter: blur(100px);

           animation: bgMove 14s ease-in-out infinite alternate;
       }

       @keyframes bgMove {
           from {
               transform: translateY(0px) translateX(0px);
           }

           to {
               transform: translateY(-40px) translateX(20px);
           }
       }

       /* SCROLLBAR */

       ::-webkit-scrollbar {
           width: 10px;
       }

       ::-webkit-scrollbar-track {
           background: #0c0c16;
       }

       ::-webkit-scrollbar-thumb {
           background: linear-gradient(180deg,
                   #8b5cf6,
                   #c084fc);

           border-radius: 999px;
       }

       ::-webkit-scrollbar-thumb:hover {
           background: linear-gradient(180deg,
                   #a855f7,
                   #d8b4fe);
       }

       /* NAVBAR */

       .navbar {
           position: fixed;
           top: 20px;
           left: 50%;
           transform: translateX(-50%);
           width: calc(100% - 40px);
           max-width: 1200px;
           z-index: 1000;

           background: rgba(10, 10, 20, .65);
           backdrop-filter: blur(20px);

           border: 1px solid rgba(255, 255, 255, .08);

           border-radius: 24px;

           display: flex;
           justify-content: space-between;
           align-items: center;

           padding: 16px 26px;

           transition: .3s;
       }

       .logo {
           font-size: 1.7rem;
           font-weight: 800;

           background: linear-gradient(90deg, #fff, #c084fc);
           -webkit-background-clip: text;

           color: transparent;

           text-decoration: none;
       }

       .nav-links {
           display: flex;
           gap: 32px;
           list-style: none;
       }

       .nav-links a,
       .nav-links button {
           text-decoration: none;
           color: #d4d4d8;
           transition: .3s;
           position: relative;
           font-weight: 500;

           background: none;
           border: none;
           padding: 0;
           font: inherit;
           cursor: pointer;
       }

       .nav-links a:hover,
       .nav-links button:hover {
           color: white;
       }

       .nav-links a::after,
       .nav-links button::after {
           content: '';
           position: absolute;
           left: 0;
           bottom: -6px;
           width: 0%;
           height: 2px;
           background: var(--purple2);
           transition: .3s;
       }

       .nav-links a:hover::after,
       .nav-links button:hover::after {
           width: 100%;
       }

       .menu-btn {
           display: none;
           font-size: 1.5rem;
           cursor: pointer;
       }

       /* HERO */

       .hero {
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           padding: 120px 20px 80px;
       }

       .hero-content {
           max-width: 900px;
       }

       .avatar {
           width: 150px;
           height: 150px;
           margin: auto;
           border-radius: 50%;
           padding: 4px;

           background: linear-gradient(135deg,
                   var(--purple),
                   var(--purple2));

           animation: pulse 3s infinite alternate;
       }

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

       @keyframes pulse {
           from {
               box-shadow: 0 0 20px rgba(139, 92, 246, .3);
           }

           to {
               box-shadow: 0 0 60px rgba(192, 132, 252, .7);
           }
       }

       .hero h1 {
           font-size: 5rem;
           margin-top: 30px;
           line-height: 1;

           background: linear-gradient(135deg,
                   #fff,
                   #c084fc,
                   #8b5cf6);

           -webkit-background-clip: text;

           color: transparent;
       }

       .hero p {
           margin-top: 25px;
           color: var(--gray);
           font-size: 1.15rem;
           line-height: 1.8;
       }

       .hero-buttons {
           margin-top: 40px;
           display: flex;
           gap: 20px;
           justify-content: center;
           flex-wrap: wrap;
       }

       .btn {
           padding: 15px 28px;
           border-radius: 16px;
           text-decoration: none;
           font-weight: 600;
           transition: .3s;
       }

       .btn-primary {
           background: linear-gradient(135deg,
                   var(--purple),
                   var(--purple2));

           color: white;
       }

       .btn-primary:hover {
           transform: translateY(-5px);

           box-shadow: 0 15px 30px rgba(139, 92, 246, .35);
       }

       .btn-secondary {
           border: 1px solid rgba(255, 255, 255, .1);

           color: white;

           background: rgba(255, 255, 255, .03);
       }

       .btn-secondary:hover {
           background: rgba(255, 255, 255, .08);
       }

       /* SECTION */

       section {
           padding: 100px 20px;
       }

       .container {
           max-width: 1200px;
           margin: auto;
       }

       .section-title {
           text-align: center;
           font-size: 3rem;
           margin-bottom: 70px;
       }

       .section-title span {
           background: linear-gradient(135deg,
                   var(--purple2),
                   var(--purple));

           -webkit-background-clip: text;

           color: transparent;
       }

       /* PROJECTS */

       .projects {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
           gap: 30px;
       }

       .card {
           background: rgba(16, 16, 28, .7);

           border: 1px solid rgba(255, 255, 255, .08);

           border-radius: 28px;

           overflow: hidden;

           transition: .4s;

           backdrop-filter: blur(18px);
       }

       .card:hover {
           transform: translateY(-12px);

           border-color: rgba(139, 92, 246, .4);

           box-shadow:
               0 20px 50px rgba(0, 0, 0, .4),
               0 0 30px rgba(139, 92, 246, .2);
       }

       .card-top {
           height: 220px;
           overflow: hidden;
           position: relative;
       }

       .card-top img {
           width: 100%;
           height: 100%;
           object-fit: cover;

           transition: .5s;
       }

       .card:hover .card-top img {
           transform: scale(1.08);
       }

       .card-top::after {
           content: '';
           position: absolute;
           inset: 0;

           background: linear-gradient(to top,
                   rgba(7, 7, 17, .9),
                   transparent);
       }

       .card-content {
           padding: 30px;
       }

       .card-content h3 {
           font-size: 1.5rem;
           margin-bottom: 12px;
       }

       .card-content p {
           color: var(--gray);
           line-height: 1.7;
       }

       .tags {
           margin-top: 20px;
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
       }

       .tags span {
           background: rgba(139, 92, 246, .12);

           border: 1px solid rgba(139, 92, 246, .2);

           color: #d8b4fe;

           padding: 8px 14px;

           border-radius: 999px;

           font-size: .8rem;
       }

       /* JOURNEY */

       .journey-list {
           display: flex;
           flex-direction: column;
           gap: 25px;
       }

       .journey-card {
           background: rgba(16, 16, 28, .7);

           border: 1px solid rgba(255, 255, 255, .08);

           border-radius: 26px;

           padding: 30px;

           display: flex;
           gap: 25px;

           align-items: flex-start;

           transition: .4s;

           backdrop-filter: blur(18px);
       }

       .journey-card:hover {
           transform: translateX(10px);

           border-color: rgba(139, 92, 246, .35);

           box-shadow: 0 10px 40px rgba(139, 92, 246, .12);
       }

       .server-icon {
           min-width: 80px;
           width: 80px;
           height: 80px;

           border-radius: 22px;

           overflow: hidden;

           background: rgba(255, 255, 255, .05);

           border: 1px solid rgba(255, 255, 255, .08);

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

       .server-icon img {
           width: 100%;
           height: 100%;
           object-fit: cover;

           transition: .35s;
       }

       .journey-card:hover .server-icon img {
           transform: scale(1.05);

           filter: drop-shadow(0 0 12px rgba(139, 92, 246, .45));
       }

       .journey-info h3 {
           font-size: 1.4rem;
           margin-bottom: 10px;
       }

       .role {
           color: #c084fc;
           margin-bottom: 12px;
       }

       .journey-info p {
           color: var(--gray);
           line-height: 1.7;
       }

       .badge {
           display: inline-block;

           margin-left: 10px;

           padding: 6px 12px;

           border-radius: 999px;

           font-size: .75rem;

           font-weight: 600;
       }

       .active-badge {
           background: rgba(34, 197, 94, .15);
           color: #86efac;
       }

       .inactive-badge {
           background: rgba(239, 68, 68, .12);
           color: #fca5a5;
       }

       /* SKILLS */

       .skills-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 30px;
       }

       .skill-box {
           background: rgba(16, 16, 28, .7);

           border: 1px solid rgba(255, 255, 255, .08);

           border-radius: 24px;

           padding: 30px;

           backdrop-filter: blur(18px);
       }

       .skill-box h3 {
           margin-bottom: 25px;
           font-size: 1.3rem;
       }

       .skill {
           margin-bottom: 20px;
       }

       .skill-name {
           display: flex;
           justify-content: space-between;
           margin-bottom: 8px;
       }

       .bar {
           height: 8px;
           background: #1f1f2e;
           border-radius: 999px;
           overflow: hidden;
       }

       .fill {
           height: 100%;
           width: 0;

           background: linear-gradient(90deg,
                   var(--purple),
                   var(--purple2));

           border-radius: 999px;

           transition: 1.2s;
       }

       /* FOOTER */

       footer {
           padding: 60px 20px;
           border-top: 1px solid rgba(255, 255, 255, .05);
           text-align: center;
       }

       .socials {
           display: flex;
           justify-content: center;
           gap: 25px;
           margin-bottom: 25px;
       }

       .socials a {
           width: 55px;
           height: 55px;

           border-radius: 18px;

           background: rgba(255, 255, 255, .04);

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

           color: white;
           font-size: 1.2rem;

           text-decoration: none;

           transition: .3s;
       }

       .socials a:hover {
           transform: translateY(-5px);

           background: linear-gradient(135deg,
                   var(--purple),
                   var(--purple2));
       }

       /* REVEAL */

       .reveal {
           opacity: 0;
           transform: translateY(70px);
           transition: 1s;
       }

       .reveal.active {
           opacity: 1;
           transform: translateY(0);
       }

       /* MOBILE */

       @media(max-width:850px) {

           .menu-btn {
               display: block;
           }

           .nav-links {
               position: fixed;
               top: 90px;
               right: -100%;

               width: 260px;

               flex-direction: column;

               background: rgba(10, 10, 20, .95);

               padding: 30px;

               border-radius: 24px;

               border: 1px solid rgba(255, 255, 255, .08);

               transition: .4s;
           }

           .nav-links.active {
               right: 20px;
           }

           .hero h1 {
               font-size: 3rem;
           }

           .section-title {
               font-size: 2.2rem;
           }

           .journey-card {
               flex-direction: column;
           }
       }

       .copy-notification {
           position: fixed;
           bottom: 30px;
           left: 50%;
           transform: translateX(-50%);

           background: rgba(20, 20, 20, 0.9);
           color: white;
           padding: 12px 20px;
           border-radius: 12px;

           font-size: 14px;
           opacity: 0;
           pointer-events: none;

           transition: 0.3s ease;
           border: 1px solid rgba(255, 255, 255, 0.1);
       }

       .copy-notification.show {
           opacity: 1;
           transform: translateX(-50%) translateY(-10px);
       }