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


   #cursor {
       width: 15px;
       height: 3px;
       background-color: #333;
       display: inline-block;
       border-radius: 10px;
   }

   body {
       font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
       background: #303446;
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 40px;
       position: relative;
       overflow-x: hidden;
   }

   body::before {
       content: '';
       position: fixed;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background:
           radial-gradient(circle at 20% 50%, rgba(202, 158, 230, 0.08) 0%, transparent 50%),
           radial-gradient(circle at 80% 80%, rgba(138, 173, 244, 0.08) 0%, transparent 50%),
           radial-gradient(circle at 40% 20%, rgba(148, 226, 213, 0.06) 0%, transparent 50%);
       animation: float 20s ease-in-out infinite;
       z-index: 0;
   }

   @keyframes float {

       0%,
       100% {
           transform: translate(0, 0) rotate(0deg);
       }

       33% {
           transform: translate(30px, -30px) rotate(120deg);
       }

       66% {
           transform: translate(-20px, 20px) rotate(240deg);
       }
   }

   .container {
       max-width: 1400px;
       width: 100%;
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       grid-template-rows: repeat(4, 180px);
       gap: 16px;
       position: relative;
       z-index: 1;
       animation: fadeIn 1s ease-out;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .card {
       background: #414559;
       border-radius: 20px;
       padding: 5px 28px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
       position: relative;
       border: 1px solid rgba(186, 187, 241, 0.1);
   }

   .card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 2px;
       background: linear-gradient(90deg, #ca9ee6, #8aadf4, #94e2d5);
       opacity: 0;
       transition: opacity 0.4s ease;
   }

   .card:hover {
       transform: translateY(-8px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
       border-color: rgba(186, 187, 241, 0.3);
       background: #464a5e;
   }

   .card:hover::before {
       opacity: 1;
   }

   .hero {
       grid-column: 3 / 5;
       grid-row: 2 / 4;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       background: linear-gradient(135deg, #51576d 0%, #414559 100%);
       position: relative;
       overflow: hidden;
   }

   .hero::after {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(202, 158, 230, 0.1) 0%, transparent 70%);
       animation: pulse 4s ease-in-out infinite;
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
           opacity: 0.5;
       }

       50% {
           transform: scale(1.1);
           opacity: 0.8;
       }
   }

   .profile-image {
       width: 160px;
       height: 160px;
       border-radius: 50%;
       background: url(/images/HAWdMo2.png);
       /* background-color: linear-gradient(135deg, #ca9ee6 0%, #8aadf4 100%); */
       /* background-color: #ca9ee6; */
       background-size: cover;
       background-repeat: no-repeat;
       background-position: bottom center;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 64px;
       color: #303446;
       font-weight: 800;
       margin-bottom: 20px;
       box-shadow: 0 8px 32px rgba(202, 158, 230, 0.4);
       border: 3px solid rgba(186, 187, 241, 0.3);
       position: relative;
       z-index: 2;
       animation: profileFloat 3s ease-in-out infinite;
   }

   @keyframes profileFloat {

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

       50% {
           transform: translateY(-10px);
       }
   }

   .hero h1 {
       font-size: 26px;
       font-weight: 700;
       color: #c6d0f5;
       margin-bottom: 8px;
       position: relative;
       z-index: 2;
   }

   .hero p {
       font-size: 16px;
       font-weight: 400;
       color: #babbf1;
       position: relative;
       z-index: 2;
   }

   .about {
       grid-column: 1 / 3;
       grid-row: 1 / 2;
   }

   .about h2 {
       font-size: 18px;
       color: #ca9ee6;
       margin-bottom: 12px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .about p {
       color: #a5adce;
       line-height: 1.7;
       font-size: 13px;
   }

   .tech-stack {
       grid-column: 5 / 7;
       grid-row: 2 / 4;
       display: flex;
       flex-direction: column;
   }

   .tech-stack h2 {
       font-size: 18px;
       color: #8aadf4;
       margin-bottom: 20px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .tech-grid {
       display: flex;
       flex-direction: column;
       gap: 12px;
       flex: 1;
   }

   .tech-item {
       display: flex;
       align-items: center;
       gap: 16px;
       background: #51576d;
       border-radius: 12px;
       padding: 2px 22px;
       transition: all 0.3s ease;
       border: 1px solid transparent;
   }

   .tech-item:hover {
       background: #626880;
       transform: translateX(8px);
       border-color: rgba(138, 173, 244, 0.4);
   }

   .tech-icon {
       font-size: 32px;
       transition: transform 0.3s ease;
   }

   .tech-item:hover .tech-icon {
       transform: scale(1.2) rotate(5deg);
   }

   .tech-name {
       font-size: 14px;
       font-weight: 600;
       color: #c6d0f5;
       flex: 1;
   }

   .projects {
       grid-column: 1 / 3;
       grid-row: 2 / 4;
   }

   .projects h2 {
       font-size: 18px;
       color: #f4b8e4;
       margin-bottom: 16px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .project-list {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .project-item {
       padding: 14px 16px;
       background: #51576d;
       border-radius: 10px;
       font-size: 13px;
       color: #c6d0f5;
       transition: all 0.3s ease;
       border-left: 3px solid transparent;
       cursor: pointer;
   }

   .project-item:hover {
       background: #626880;
       border-left-color: #ca9ee6;
       transform: translateX(8px);
   }

   .social {
       grid-column: 3 / 5;
       grid-row: 4 / 5;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .social h2 {
       font-size: 18px;
       color: #94e2d5;
       margin-bottom: 20px;
       text-align: center;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .social-grid {
       display: flex;
       justify-content: center;
       gap: 16px;
   }

   .social-item {
       width: 56px;
       height: 56px;
       border-radius: 16px;
       background: #51576d;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 26px;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       cursor: pointer;
       border: 1px solid transparent;
       position: relative;
       overflow: hidden;
   }

   .social-item::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(138, 173, 244, 0.3);
       transition: all 0.5s ease;
       transform: translate(-50%, -50%);
   }

   .social-item:hover::before {
       width: 100px;
       height: 100px;
   }

   .social-item:hover {
       transform: translateY(-8px) scale(1.1);
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
   }

   .social-item.github:hover {
       background: #8aadf4;
       border-color: #8aadf4;
   }

   .social-item.linkedin:hover {
       background: #ca9ee6;
       border-color: #ca9ee6;
   }

   .social-item.email:hover {
       background: #f4b8e4;
       border-color: #f4b8e4;
   }

   .social-item.twitter:hover {
       background: #94e2d5;
       border-color: #94e2d5;
   }

   .experience {
       grid-column: 5 / 7;
       grid-row: 4 / 5;
   }

   .experience h2 {
       font-size: 18px;
       color: #ef9f76;
       margin-bottom: 12px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .stat {
       font-size: 48px;
       font-weight: 800;
       background: linear-gradient(135deg, #ca9ee6, #8aadf4);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 8px;
   }

   .experience p {
       color: #a5adce;
       font-size: 13px;
       line-height: 1.6;
   }

   .skills {
       grid-column: 3 / 5;
       grid-row: 1 / 2;
   }

   .skills h2 {
       font-size: 18px;
       color: #a6d189;
       margin-bottom: 16px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .skill-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }

   .skill-tag {
       padding: 8px 16px;
       background: #51576d;
       border-radius: 20px;
       font-size: 12px;
       color: #c6d0f5;
       border: 1px solid transparent;
       transition: all 0.3s ease;
       cursor: default;
   }

   .skill-tag:hover {
       background: #626880;
       border-color: #a6d189;
       transform: scale(1.05);
   }

   .status {
       grid-column: 5 / 7;
       grid-row: 1 / 2;
   }

   .status h2 {
       font-size: 18px;
       color: #e5c890;
       margin-bottom: 12px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .status-indicator {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 16px;
       background: #51576d;
       border-radius: 12px;
       margin-bottom: 12px;
   }

   .status-dot {
       width: 12px;
       height: 12px;
       background: #a6d189;
       border-radius: 50%;
       animation: blink 2s ease-in-out infinite;
       box-shadow: 0 0 12px #a6d189;
   }

   @keyframes blink {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.4;
       }
   }

   .status-text {
       color: #c6d0f5;
       font-size: 13px;
       font-weight: 600;
   }

   .footer {
       grid-column: 1 / 3;
       grid-row: 4 / 5;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .footer h2 {
       font-size: 18px;
       color: #babbf1;
       margin-bottom: 12px;
       font-weight: 700;
       letter-spacing: 0.5px;
   }

   .footer p {
       color: #a5adce;
       font-size: 13px;
       line-height: 1.7;
   }

   @media (max-width: 1200px) {
       .container {
           grid-template-columns: repeat(2, 1fr);
           grid-template-rows: auto;
           gap: 16px;
       }

       .hero,
       .tech-stack,
       .projects,
       .social,
       .about,
       .experience,
       .skills,
       .status,
       .footer {
           grid-column: span 2;
           grid-row: auto;
       }
   }