*,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      :root {
        --bg: #04050f;
        --surface: #0b0d1f;
        --border: rgba(255, 255, 255, 0.07);
        --accent1: #6d28d9;
        --accent2: #2563eb;
        --text-muted: #94a3b8;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--bg);
        color: #f1f5f9;
        font-family: 'Inter', sans-serif;
        overflow-x: hidden;
      }
      h1,
      h2,
      h3,
      .display {
        font-family: 'Space Grotesk', sans-serif;
      }
      .glass {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(16px);
        border: 1px solid var(--border);
      }
      .grad-text {
        background: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--accent1), var(--accent2));
        transition:
          opacity 0.25s,
          transform 0.2s;
      }
      .btn-primary:hover {
        opacity: 0.88;
        transform: translateY(-2px);
      }
      nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background: rgba(4, 5, 15, 0.75);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
      }
      #home {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background:
          radial-gradient(
            ellipse 60% 50% at 80% 20%,
            rgba(109, 40, 217, 0.18),
            transparent
          ),
          radial-gradient(
            ellipse 50% 40% at 10% 80%,
            rgba(37, 99, 235, 0.15),
            transparent
          ),
          var(--bg);
      }
      #home::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
          );
        background-size: 60px 60px;
        pointer-events: none;
      }
      #particles-canvas {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      #home > .hero-inner {
        position: relative;
        z-index: 1;
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes slideRight {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0.85);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .hero-label {
        animation: slideRight 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
      }
      .hero-headline {
        animation: fadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
      }
      .hero-sub {
        animation: fadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s both;
      }
      .hero-ctas {
        animation: fadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.72s both;
      }
      .hero-orb-wrap {
        animation: scaleIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both;
      }
      #typed-word {
        display: inline-block;
        min-width: 180px;
        white-space: nowrap;
      }
      .typed-cursor {
        display: inline-block;
        width: 3px;
        height: 0.85em;
        background: #818cf8;
        margin-left: 4px;
        vertical-align: middle;
        animation: blink 1s step-end infinite;
      }
      @keyframes blink {
        50% {
          opacity: 0;
        }
      }
      .logo-orb {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #000000;
      }
      .logo-orb::after {
        content: '';
        position: absolute;
        inset: -18px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        animation: pulseRing 3s ease-out infinite;
      }
      @keyframes pulseRing {
        0% {
          transform: scale(1);
          opacity: 0.6;
        }
        100% {
          transform: scale(1.15);
          opacity: 0;
        }
      }
      .logo-orb::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          transparent 65%,
          rgba(255, 255, 255, 0.35) 82%,
          rgba(200, 200, 200, 0.2) 90%,
          transparent 100%
        );
        animation: spin 4s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .orb-glow {
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 38% 35%,
          rgba(20, 20, 20, 0.9),
          rgba(5, 5, 10, 0.95) 55%,
          transparent 78%
        );
        animation: glowPulse 4s ease-in-out infinite alternate;
      }
      @keyframes glowPulse {
        from {
          opacity: 0.7;
        }
        to {
          opacity: 1;
        }
      }
      .logo-orb img {
        width: 290px;
        height: 290px;
        border-radius: 50%;
        object-fit: cover;
        position: relative;
        z-index: 1;
      }
      .orbit-ring {
        position: absolute;
        inset: -36px;
        border-radius: 50%;
        border: 1px dashed rgba(255, 255, 255, 0.12);
        animation: spin 18s linear infinite reverse;
      }
      .orbit-dot {
        position: absolute;
        top: 50%;
        left: -5px;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        border-radius: 50%;
        background: #e2e8f0;
        box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.25);
      }
      @media (prefers-reduced-motion: reduce) {
        .logo-orb::before,
        .logo-orb::after,
        .orbit-ring,
        .orb-glow,
        .hero-label,
        .hero-headline,
        .hero-sub,
        .hero-ctas,
        .hero-orb-wrap {
          animation: none;
          opacity: 1;
          transform: none;
        }
      }
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.72rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #818cf8;
        margin-bottom: 1rem;
      }
      .section-label::before {
        content: '';
        display: block;
        width: 24px;
        height: 1px;
        background: #818cf8;
      }
      .section-label.no-line::before {
        display: none;
      }
      .proj-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition:
          transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
          border-color 0.35s;
      }
      .proj-card .p-5 {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
      }
      .proj-card .p-5 a.btn-primary {
        margin-top: auto;
        align-self: flex-start;
      }
      .proj-card:hover {
        transform: translateY(-8px);
        border-color: rgba(109, 40, 217, 0.5);
      }
      .proj-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      .proj-card:hover img {
        transform: scale(1.04);
      }
      .proj-card img.logo-contain {
        object-fit: contain;
        background: var(--surface);
        height: 220px;
        padding: 12px 18px;
      }
      .tech-pill {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        border-radius: 9999px;
        padding: 0.5rem 1.4rem;
        font-size: 0.875rem;
        transition:
          background 0.2s,
          border-color 0.2s,
          transform 0.35s ease;
        animation: floatPill 8s ease-in-out infinite;
        will-change: transform, box-shadow;
      }
      .tech-pill:hover {
        background: rgba(109, 40, 217, 0.18);
        border-color: rgba(109, 40, 217, 0.55);
        transform: translateY(-3px) scale(1.02);
      }
      .tech-pill:nth-child(1) {
        animation-delay: 0s;
      }
      .tech-pill:nth-child(2) {
        animation-delay: 0.18s;
      }
      .tech-pill:nth-child(3) {
        animation-delay: 0.36s;
      }
      .tech-pill:nth-child(4) {
        animation-delay: 0.54s;
      }
      .tech-pill:nth-child(5) {
        animation-delay: 0.72s;
      }
      .tech-pill:nth-child(6) {
        animation-delay: 0.9s;
      }
      .tech-pill:nth-child(7) {
        animation-delay: 1.08s;
      }
      .tech-pill:nth-child(8) {
        animation-delay: 1.26s;
      }
      @keyframes floatPill {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-6px);
        }
      }
      #tech {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at top 15% left 50%,
            rgba(109, 40, 217, 0.14),
            transparent 30%
          ),
          radial-gradient(
            circle at bottom right 20%,
            rgba(37, 99, 235, 0.1),
            transparent 24%
          ),
          var(--bg);
      }
      #tech::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            circle at 20% 30%,
            rgba(107, 33, 168, 0.15),
            transparent 26%
          ),
          radial-gradient(
            circle at 80% 18%,
            rgba(14, 165, 233, 0.1),
            transparent 18%
          );
        pointer-events: none;
        opacity: 0.92;
      }
      #tech::after {
        content: '';
        position: absolute;
        top: 10%;
        right: 8%;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 40% 40%,
          rgba(59, 130, 246, 0.22),
          transparent 55%
        );
        filter: blur(24px);
        opacity: 0.8;
        pointer-events: none;
      }
      #tech h2 {
        position: relative;
        z-index: 2;
      }
      #tech h2::after {
        content: '';
        position: absolute;
        width: 220px;
        height: 220px;
        top: -24px;
        right: -32px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 40% 40%,
          rgba(139, 92, 246, 0.16),
          transparent 60%
        );
        filter: blur(24px);
        z-index: -1;
        opacity: 0.9;
        pointer-events: none;
      }
      #tech > .max-w-7xl {
        position: relative;
        z-index: 1;
      }
      @media (max-width: 768px), (prefers-reduced-motion: reduce) {
        .tech-pill {
          animation: none;
        }
        #tech::after,
        #tech h2::after {
          opacity: 0.45;
        }
      }
      .contact-row {
        background:
          radial-gradient(
            ellipse 60% 50% at 50% 50%,
            rgba(109, 40, 217, 0.12),
            rgba(37, 99, 235, 0.08)
          ),
          var(--surface);
        border: 1px solid var(--border);
        border-radius: 9999px;
        padding: 1rem 2rem;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
      }
      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      #hamburger span {
        transition:
          transform 0.3s ease,
          opacity 0.3s ease;
      }
      #hamburger.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }
      #hamburger.open span:nth-child(2) {
        opacity: 0;
      }
      #hamburger.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }
      #mobile-menu {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 5rem 1.5rem 1.5rem;
        position: fixed;
        top: 0;
        right: -100%;
        width: 40%;
        min-width: 160px;
        height: auto;
        border-bottom-left-radius: 1.5rem;
        background: rgba(4, 5, 15, 0.4);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s;
      }
      #mobile-menu.open {
        right: 0;
        opacity: 1;
        visibility: visible;
        padding: 5rem 1.5rem 1.5rem;
        border-top: none;
      }
      #mobile-menu a {
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 0.95rem;
        font-weight: 500;
      }
      #mobile-menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
      }
      #mobile-menu-backdrop.open {
        opacity: 1;
        visibility: visible;
      }
      @media (min-width: 768px) {
        #mobile-menu {
          display: none !important;
        }
      }
      footer {
        border-top: 1px solid var(--border);
        padding: 2rem;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.85rem;
      }
      .aurora {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      .aurora-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.18;
      }
      .aurora-blob:nth-child(1) {
        width: 600px;
        height: 300px;
        background: #6d28d9;
        top: -60px;
        left: -100px;
        animation: auroraMove1 10s ease-in-out infinite alternate;
      }
      .aurora-blob:nth-child(2) {
        width: 500px;
        height: 260px;
        background: #2563eb;
        top: 40px;
        right: -120px;
        animation: auroraMove2 13s ease-in-out infinite alternate;
      }
      .aurora-blob:nth-child(3) {
        width: 400px;
        height: 200px;
        background: #7c3aed;
        bottom: 20px;
        left: 30%;
        animation: auroraMove3 9s ease-in-out infinite alternate;
      }
      @keyframes auroraMove1 {
        from {
          transform: translateX(0) translateY(0) scaleX(1);
        }
        to {
          transform: translateX(80px) translateY(30px) scaleX(1.2);
        }
      }
      @keyframes auroraMove2 {
        from {
          transform: translateX(0) translateY(0) scaleY(1);
        }
        to {
          transform: translateX(-60px) translateY(50px) scaleY(1.3);
        }
      }
      @keyframes auroraMove3 {
        from {
          transform: translateX(0) scaleX(1);
        }
        to {
          transform: translateX(-80px) scaleX(1.4);
        }
      }
      #stars-canvas {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      .stats-row {
        display: flex;
        gap: 2rem;
        margin-top: 2.5rem;
        flex-wrap: wrap;
      }
      .stat-item {
        text-align: left;
      }
      .stat-num {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
      }
      .stat-label {
        font-size: 0.78rem;
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 4px;
      }
      .stat-divider {
        width: 1px;
        background: var(--border);
        align-self: stretch;
      }
      @media (prefers-reduced-motion: reduce) {
        .aurora-blob {
          animation: none;
        }
      }

      /* ===== COMPREHENSIVE MOBILE FIXES ===== */
      @media (max-width: 768px) {

        /* Nav */
        nav {
          padding: 0;
        }

        /* Hero section: account for fixed nav */
        #home {
          padding-top: 90px !important;
          min-height: auto;
        }

        /* Typed word: prevent overflow */
        #typed-word {
          min-width: 80px;
          max-width: 100%;
        }

        /* Logo orb: scale down for mobile */
        .logo-orb {
          width: 200px;
          height: 200px;
          margin: 0 auto;
        }
        .logo-orb img {
          width: 190px;
          height: 190px;
        }
        .orbit-ring {
          inset: -24px;
        }
        .logo-orb::after {
          inset: -12px;
        }

        /* Hero orb: hide on very small screens, show centered */
        .hero-orb-wrap {
          display: flex;
          justify-content: center;
          order: -1;
          margin-bottom: 1rem;
        }

        /* Stats row: tighter on mobile */
        .stats-row {
          gap: 1rem;
          margin-top: 1.5rem;
        }
        .stat-num {
          font-size: 1.5rem;
        }

        /* Contact row: stack vertically, remove pill shape overflow */
        .contact-row {
          border-radius: 16px;
          padding: 0.75rem 1.25rem;
          width: 100%;
          justify-content: center;
          box-sizing: border-box;
        }

        /* Aurora blobs: constrain to viewport */
        .aurora-blob:nth-child(1) {
          width: 280px;
          height: 150px;
          left: -60px;
        }
        .aurora-blob:nth-child(2) {
          width: 240px;
          height: 130px;
          right: -60px;
        }
        .aurora-blob:nth-child(3) {
          width: 200px;
          height: 100px;
        }

        /* Section headings: tighter padding */
        section {
          overflow-x: hidden;
        }

        /* Project cards: full width on mobile */
        .proj-card {
          width: 100%;
        }

        /* Mobile menu: larger tap targets */
        #mobile-menu a {
          padding: 0.75rem 0;
          font-size: 1rem;
          font-weight: 500;
        }

        /* Hero CTA buttons: full width */
        .hero-ctas a {
          width: 100%;
          text-align: center;
          justify-content: center;
        }

        /* Tech pills: smaller padding */
        .tech-pill {
          padding: 0.4rem 1rem;
          font-size: 0.8rem;
        }

        /* Footer: smaller padding */
        footer {
          padding: 1.25rem 1rem;
          font-size: 0.78rem;
        }
      }

      /* Extra small phones (< 400px) */
      @media (max-width: 400px) {
        .logo-orb {
          width: 160px;
          height: 160px;
        }
        .logo-orb img {
          width: 152px;
          height: 152px;
        }
        .stats-row {
          flex-direction: column;
          gap: 0.75rem;
        }
        .stat-divider {
          display: none;
        }
      }