/* Base */
      * {
        box-sizing: border-box;
      }
      :root {
        --bg: #0b0c0f;
        --bg-alt: #101218;
        --text: #e6e8ef;
        --muted: #a0a6b3;
        --card: #12151c;
        --border: #232735;
        --accent: #7c5cff;
        --accent-2: #22d3ee;
        --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
      }

      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
          sans-serif;
        background: linear-gradient(180deg, var(--bg) 0%, #0d1016 100%);
        color: var(--text);
        line-height: 1.6;
        position: relative;
        overflow-x: hidden;
      }

      /* Background Animations */
      body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(
            circle at 20% 80%,
            rgba(124, 92, 255, 0.1) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 80% 20%,
            rgba(34, 211, 238, 0.1) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 40% 40%,
            rgba(124, 92, 255, 0.05) 0%,
            transparent 50%
          );
        animation: backgroundShift 20s ease-in-out infinite;
        z-index: -1;
      }

      @keyframes backgroundShift {
        0%,
        100% {
          transform: scale(1) rotate(0deg);
        }
        50% {
          transform: scale(1.1) rotate(1deg);
        }
      }

      /* Floating Particles */
      .floating-particles {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
      }

      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: var(--accent);
        border-radius: 50%;
        opacity: 0.3;
        animation: floatParticle 15s linear infinite;
      }

      .particle:nth-child(1) {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 20s;
      }

      .particle:nth-child(2) {
        top: 60%;
        left: 80%;
        animation-delay: 5s;
        animation-duration: 25s;
      }

      .particle:nth-child(3) {
        top: 80%;
        left: 20%;
        animation-delay: 10s;
        animation-duration: 18s;
      }

      .particle:nth-child(4) {
        top: 30%;
        left: 70%;
        animation-delay: 15s;
        animation-duration: 22s;
      }

      .particle:nth-child(5) {
        top: 70%;
        left: 90%;
        animation-delay: 8s;
        animation-duration: 30s;
      }

      @keyframes floatParticle {
        0% {
          transform: translateY(0px) translateX(0px) rotate(0deg);
          opacity: 0;
        }
        10% {
          opacity: 0.3;
        }
        90% {
          opacity: 0.3;
        }
        100% {
          transform: translateY(-100vh) translateX(100px) rotate(360deg);
          opacity: 0;
        }
      }

      /* Geometric Shapes */
      .geometric-shapes {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
      }

      .shape {
        position: absolute;
        opacity: 0.1;
        animation: shapeFloat 25s ease-in-out infinite;
      }

      .shape.triangle {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 26px solid var(--accent-2);
      }

      .shape.circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
      }

      .shape.square {
        width: 20px;
        height: 20px;
        background: var(--accent-2);
        transform: rotate(45deg);
      }

      .shape:nth-child(1) {
        top: 15%;
        left: 5%;
        animation-delay: 0s;
      }

      .shape:nth-child(2) {
        top: 75%;
        left: 85%;
        animation-delay: 8s;
      }

      .shape:nth-child(3) {
        top: 45%;
        left: 15%;
        animation-delay: 16s;
      }

      .shape:nth-child(4) {
        top: 25%;
        left: 75%;
        animation-delay: 24s;
      }

      @keyframes shapeFloat {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg) scale(1);
        }
        25% {
          transform: translateY(-20px) rotate(90deg) scale(1.1);
        }
        50% {
          transform: translateY(-10px) rotate(180deg) scale(0.9);
        }
        75% {
          transform: translateY(-30px) rotate(270deg) scale(1.2);
        }
      }

      /* Enhanced Blob Animation */
      .blob {
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(
            60% 60% at 30% 30%,
            var(--accent) 0%,
            rgba(124, 92, 255, 0.2) 60%,
            transparent 100%
          ),
          radial-gradient(
            60% 60% at 70% 70%,
            var(--accent-2) 0%,
            rgba(34, 211, 238, 0.2) 60%,
            transparent 100%
          );
        filter: blur(0.5px);
        box-shadow: var(--shadow);
        animation: float 6s ease-in-out infinite,
          blobMorph 8s ease-in-out infinite;
        position: relative;
      }

      .blob::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        transform: translate(-50%, -50%);
        animation: blobPulse 4s ease-in-out infinite;
      }

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

      @keyframes blobMorph {
        0%,
        100% {
          border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
        }
        25% {
          border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
        }
        50% {
          border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
        }
        75% {
          border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
        }
      }

      @keyframes blobPulse {
        0%,
        100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.3;
        }
        50% {
          transform: translate(-50%, -50%) scale(1.1);
          opacity: 0.1;
        }
      }

      /* Gradient Border Animation */
      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: var(--shadow);
        overflow: hidden;
        position: relative;
      }

      .card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(
          45deg,
          var(--accent),
          var(--accent-2),
          var(--accent)
        );
        background-size: 200% 200%;
        animation: gradientShift 3s ease infinite;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

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

      @keyframes gradientShift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      /* Enhanced Button Animations */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 10px;
        font-weight: 600;
        border: 1px solid var(--border);
        transition: 0.25s;
        position: relative;
        overflow: hidden;
      }

      .btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        transition: left 0.5s ease;
      }

      .btn:hover::before {
        left: 100%;
      }

      .btn.primary {
        background: var(--accent);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 10px 24px -10px rgba(124, 92, 255, 0.6);
      }

      .btn.primary:hover {
        filter: brightness(1.05);
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -10px rgba(124, 92, 255, 0.8);
      }

      .btn.outline {
        background: transparent;
        color: var(--text);
      }

      .btn.outline:hover {
        border-color: var(--accent);
        color: var(--accent);
        transform: translateY(-1px);
      }

      /* Skill Bar Animation */
      .bar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        border-radius: 999px;
        animation: skillFill 2s ease-out forwards;
        transform: scaleX(1);
        transform-origin: left;
      }

      @keyframes skillFill {
        to {
          transform: scaleX(1);
        }
      }

      /* Profile Picture Enhancement */
      .profile-pic {
        width: 200px;
        height: 200px;
        border-radius: 20%;
        object-fit: cover;
        border: 2px solid var(--border);
        box-shadow: var(--shadow);
        background: #0f131c;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .profile-pic:hover {
        transform: scale(1.02);
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8);
      }

      .profile-pic::after {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 20%;
        background: linear-gradient(45deg, var(--accent), var(--accent-2));
        z-index: -1;
        animation: borderGlow 3s ease-in-out infinite;
      }
      .card::before {
        pointer-events: none;
      }

      @keyframes borderGlow {
        0%,
        100% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
      }

      img {
        max-width: 100%;
        display: block;
        border-radius: 12px;
      }
      a {
        color: var(--text);
        text-decoration: none;
      }

      .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
      }
      .narrow {
        max-width: 72%;
      }
      .section {
        padding: 80px 0;
      }
      .section.alt {
        background: var(--bg-alt);
      }
      .section-title {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 24px;
      }
      .accent {
        color: var(--accent);
      }

      /* Header */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(10, 12, 16, 0.7);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
      }
      .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
      }
      .brand {
        font-weight: 700;
        letter-spacing: 0.2px;
      }
      .nav {
        display: flex;
        gap: 25px;
      }
      .nav-link {
        color: var(--muted);
        position: relative;
      }
      .nav-link:hover {
        color: var(--text);
      }
      .nav-link.active {
        color: var(--accent);
      }

      .hamburger {
        display: none;
        background: none;
        border: 0;
        cursor: pointer;
      }
      .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text);
        margin: 5px 0;
        transition: 0.3s;
        border-radius: 1px;
      }

      /* Hero */
      .hero {
        padding-top: 100px;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
        align-items: center;
      }
      .eyebrow {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 2px;
        color: var(--accent-2);
      }
      .hero h1 {
        font-size: 40px;
        line-height: 1.2;
        margin: 10px 0 12px;
      }
      .lead {
        color: var(--muted);
        max-width: 600px;
      }
      .cta-row {
        display: flex;
        gap: 12px;
        margin-top: 20px;
      }

      /* New: hero visual pair (blob + profile image) */
      .hero-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
      }
      .blob {
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(
            60% 60% at 30% 30%,
            var(--accent) 0%,
            rgba(124, 92, 255, 0.2) 60%,
            transparent 100%
          ),
          radial-gradient(
            60% 60% at 70% 70%,
            var(--accent-2) 0%,
            rgba(34, 211, 238, 0.2) 60%,
            transparent 100%
          );
        filter: blur(0.5px);
        box-shadow: var(--shadow);
        animation: float 6s ease-in-out infinite;
      }
      .profile-pic {
        width: 320px;
        height: 320px;
        border-radius: 20%;
        object-fit: cover;
        border: 3px solid var(--border);
        box-shadow: var(--shadow);
        background: #0f131c;
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }

      /* Buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 10px;
        font-weight: 600;
        border: 1px solid var(--border);
        transition: 0.25s;
      }
      .btn.small {
        padding: 8px 12px;
        font-size: 14px;
      }
      .btn.primary {
        background: var(--accent);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 10px 24px -10px rgba(124, 92, 255, 0.6);
      }
      .btn.primary:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
      }
      .btn.outline {
        background: transparent;
        color: var(--text);
      }
      .btn.outline:hover {
        border-color: var(--accent);
        color: var(--accent);
      }

      /* Cards & Grid */
      .grid {
        display: grid;
        gap: 20px;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .card-body {
        padding: 16px;
      }
      .card-actions {
        margin-top: 12px;
        display: flex;
        gap: 10px;
      }

      /* Skills */
      .skills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
      }
      .skills li {
        background: #0f131c;
        border: 1px solid var(--border);
        color: var(--text);
        padding: 8px 12px;
        border-radius: 999px;
        display: inline-flex;
        gap: 8px;
        align-items: center;
      }
      .skills i {
        color: var(--accent-2);
      }
      .bars {
        display: grid;
        gap: 10px;
      }
      .bar {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 14px;
        align-items: center;
      }
      .bar span {
        color: var(--muted);
        font-size: 14px;
      }
      .bar div {
        background: #0f131c;
        border: 1px solid var(--border);
        border-radius: 999px;
        height: 10px;
        overflow: hidden;
      }
      .bar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        border-radius: 999px;
      }

      /* Projects */
      .projects-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .card img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
      }
      .card:hover {
        transform: translateY(-2px);
      }

      /* Contact */
      .contact-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
      }
      .form {
        padding: 20px;
        display: grid;
        gap: 14px;
      }
      .form label {
        display: grid;
        gap: 6px;
        font-weight: 600;
      }
      .form input,
      .form textarea {
        background: #0f131c;
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 12px;
        outline: none;
        transition: 0.2s;
      }
      .form input:focus,
      .form textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15);
      }
      .form-status {
        color: var(--accent-2);
        min-height: 20px;
        margin-top: 6px;
        font-size: 14px;
      }

      .contact-info {
        padding: 20px;
      }
      .contact-info h3 {
        margin: 0 0 12px;
      }
      .contact-info ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 10px;
      }
      .contact-info a {
        color: var(--accent-2);
      }
      .contact-info i {
        color: var(--accent-2);
        margin-right: 8px;
      }

      /* Footer */
      .site-footer {
        border-top: 1px solid var(--border);
        background: rgba(10, 12, 16, 0.75);
      }
      .footer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 0;
      }
      .socials {
        display: flex;
        gap: 12px;
      }
      .icon {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--muted);
      }
      .icon:hover {
        color: var(--accent);
        border-color: var(--accent);
      }

      /* Reveal animations */
      .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.6s ease, transform 0.6s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Responsive */
      @media (max-width: 960px) {
        .hero-grid {
          grid-template-columns: 1fr;
        }
        .projects-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .contact-grid {
          grid-template-columns: 1fr;
        }
        .profile-pic {
          width: 180px;
          height: 180px;
        }
        .blob {
          width: 200px;
          height: 200px;
        }
      }

      @media (max-width: 720px) {
        .nav {
          position: fixed;
          inset: 64px 0 0 0;
          background: rgba(10, 12, 16, 0.98);
          backdrop-filter: blur(6px);
          border-top: 1px solid var(--border);
          display: none;
          flex-direction: column;
          padding: 20px;
        }
        .nav.open {
          display: flex;
        }
        .nav a {
          padding: 12px 6px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }
        .hamburger {
          display: inline-block;
        }
        .projects-grid {
          grid-template-columns: 1fr;
        }
        .profile-pic {
          width: 160px;
          height: 160px;
        }
        .blob {
          width: 180px;
          height: 180px;
        }
      }