:root {
          /* Primitive Color Tokens */
          --color-white: rgba(255, 255, 255, 1);
          --color-black: rgba(0, 0, 0, 1);
          --color-cream-50: rgba(252, 252, 249, 1);
          --color-cream-100: rgba(255, 255, 253, 1);
          --color-gray-200: rgba(245, 245, 245, 1);
          --color-gray-300: rgba(167, 169, 169, 1);
          --color-gray-400: rgba(119, 124, 124, 1);
          --color-slate-500: rgba(98, 108, 113, 1);
          --color-brown-600: rgba(94, 82, 64, 1);
          --color-charcoal-700: rgba(31, 33, 33, 1);
          --color-charcoal-800: rgba(38, 40, 40, 1);
          --color-slate-900: rgba(19, 52, 59, 1);
          --color-teal-300: rgba(50, 184, 198, 1);
          --color-teal-400: rgba(45, 166, 178, 1);
          --color-teal-500: rgba(33, 128, 141, 1);
          --color-teal-600: rgba(29, 116, 128, 1);
          --color-teal-700: rgba(26, 104, 115, 1);
          --color-teal-800: rgba(41, 150, 161, 1);
          --color-red-400: rgba(255, 84, 89, 1);
          --color-red-500: rgba(192, 21, 47, 1);
          --color-orange-400: rgba(230, 129, 97, 1);
          --color-orange-500: rgba(168, 75, 47, 1);

          /* RGB versions for opacity control */
          --color-brown-600-rgb: 94, 82, 64;
          --color-teal-500-rgb: 33, 128, 141;
          --color-slate-900-rgb: 19, 52, 59;
          --color-slate-500-rgb: 98, 108, 113;
          --color-red-500-rgb: 192, 21, 47;
          --color-red-400-rgb: 255, 84, 89;
          --color-orange-500-rgb: 168, 75, 47;
          --color-orange-400-rgb: 230, 129, 97;

          /* Background color tokens (Light Mode) */
          --color-bg-1: rgba(59, 130, 246, 0.08);
          --color-bg-2: rgba(245, 158, 11, 0.08);
          --color-bg-3: rgba(34, 197, 94, 0.08);
          --color-bg-4: rgba(239, 68, 68, 0.08);
          --color-bg-5: rgba(147, 51, 234, 0.08);
          --color-bg-6: rgba(249, 115, 22, 0.08);
          --color-bg-7: rgba(236, 72, 153, 0.08);
          --color-bg-8: rgba(6, 182, 212, 0.08);

          /* Semantic Color Tokens (Light Mode) */
          --color-background: var(--color-cream-50);
          --color-surface: var(--color-cream-100);
          --color-text: var(--color-slate-900);
          --color-text-secondary: var(--color-slate-500);
          --color-primary: var(--color-teal-500);
          --color-primary-hover: var(--color-teal-600);
          --color-primary-active: var(--color-teal-700);
          --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
          --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
          --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
          --color-border: rgba(var(--color-brown-600-rgb), 0.2);
          --color-btn-primary-text: var(--color-cream-50);
          --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
          --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
          --color-error: var(--color-red-500);
          --color-success: var(--color-teal-500);
          --color-warning: var(--color-orange-500);
          --color-info: var(--color-slate-500);
          --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
          --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

          /* Typography */
          --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
            BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
            Monaco, Consolas, monospace;
          --font-size-xs: 11px;
          --font-size-sm: 12px;
          --font-size-base: 14px;
          --font-size-md: 14px;
          --font-size-lg: 16px;
          --font-size-xl: 18px;
          --font-size-2xl: 20px;
          --font-size-3xl: 24px;
          --font-size-4xl: 30px;
          --font-weight-normal: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 550;
          --font-weight-bold: 600;
          --line-height-tight: 1.2;
          --line-height-normal: 1.5;
          --letter-spacing-tight: -0.01em;

          /* Spacing */
          --space-0: 0;
          --space-1: 1px;
          --space-2: 2px;
          --space-4: 4px;
          --space-6: 6px;
          --space-8: 8px;
          --space-10: 10px;
          --space-12: 12px;
          --space-16: 16px;
          --space-20: 20px;
          --space-24: 24px;
          --space-32: 32px;
          --space-40: 40px;
          --space-60: 60px;
          --space-80: 80px;

          /* Border Radius */
          --radius-sm: 6px;
          --radius-base: 8px;
          --radius-md: 10px;
          --radius-lg: 12px;
          --radius-full: 9999px;

          /* Shadows */
          --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
          --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
            0 2px 4px -1px rgba(0, 0, 0, 0.02);
          --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
            0 4px 6px -2px rgba(0, 0, 0, 0.02);
          --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 -1px 0 rgba(0, 0, 0, 0.03);

          /* Animation */
          --duration-fast: 150ms;
          --duration-normal: 250ms;
          --duration-slow: 600ms;
          --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
          --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
          --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

          /* Layout */
          --container-sm: 640px;
          --container-md: 768px;
          --container-lg: 1024px;
          --container-xl: 1280px;
        }

        /* Dark mode colors */
        @media (prefers-color-scheme: dark) {
          :root {
            --color-gray-400-rgb: 119, 124, 124;
            --color-teal-300-rgb: 50, 184, 198;
            --color-gray-300-rgb: 167, 169, 169;
            --color-gray-200-rgb: 245, 245, 245;

            --color-bg-1: rgba(29, 78, 216, 0.15);
            --color-bg-2: rgba(180, 83, 9, 0.15);
            --color-bg-3: rgba(21, 128, 61, 0.15);
            --color-bg-4: rgba(185, 28, 28, 0.15);
            --color-bg-5: rgba(107, 33, 168, 0.15);
            --color-bg-6: rgba(194, 65, 12, 0.15);
            --color-bg-7: rgba(190, 24, 93, 0.15);
            --color-bg-8: rgba(8, 145, 178, 0.15);

            --color-background: var(--color-charcoal-700);
            --color-surface: var(--color-charcoal-800);
            --color-text: var(--color-gray-200);
            --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
            --color-primary: var(--color-teal-300);
            --color-primary-hover: var(--color-teal-400);
            --color-primary-active: var(--color-teal-800);
            --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
            --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
            --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
            --color-border: rgba(var(--color-gray-400-rgb), 0.3);
            --color-error: var(--color-red-400);
            --color-success: var(--color-teal-300);
            --color-warning: var(--color-orange-400);
            --color-info: var(--color-gray-300);
            --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
            --color-btn-primary-text: var(--color-slate-900);
            --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
            --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
            --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
              inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
          }
        }

        /* Base styles */
        html {
          font-size: var(--font-size-base);
          font-family: var(--font-family-base);
          line-height: var(--line-height-normal);
          color: var(--color-text);
          background-color: var(--color-background);
          -webkit-font-smoothing: antialiased;
          box-sizing: border-box;
          scroll-behavior: smooth;
          overflow-x: hidden;
        }

        /* Hide default cursor only when custom cursor is active */
        body.custom-cursor-active {
          cursor: none;
        }
        
        /* Hide cursor on all interactive elements too */
        body.custom-cursor-active a,
        body.custom-cursor-active button,
        body.custom-cursor-active .card,
        body.custom-cursor-active .portfolio-item,
        body.custom-cursor-active .nav__brand,
        body.custom-cursor-active [role="button"],
        body.custom-cursor-active [tabindex="0"] {
          cursor: none;
        }

        /* Dynamic color properties for pseudo-elements */
        :root {
          --dynamic-text-color: #000000;
          --dynamic-border-color: rgba(0, 0, 0, 0.2);
          --dynamic-background-color: #ffffff;
        }

        /* Dynamic scroll-based styling */
        body {
          margin: 0;
          padding: 0;
          background-color: #ffffff;
          color: #000000;
          transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          overflow-x: hidden;
          width: 100%;
          max-width: 100vw;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
        }

        main {
          flex: 1;
        }

        /* Transition states for all text elements */
        h1, h2, h3, h4, h5, h6, p, a, .nav__link, .ticker-item, .section__title, .hero__currently, .hero__statement, .hero__description, .info-value, .info-label, .contact-link, .footer__text {
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Transition states for backgrounds */
        .header, .logo-ticker, .card, .contact-sidebar, .footer {
          transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        *,
        *::before,
        *::after {
          box-sizing: inherit;
        }

        /* Prevent horizontal overflow globally */
        body, main, section, div, article, aside, header, footer, nav {
          max-width: 100vw;
        }

        img, video, iframe, embed, object {
          max-width: 100%;
          height: auto;
        }

        /* Typography */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 0;
          font-weight: var(--font-weight-semibold);
          line-height: var(--line-height-tight);
          color: var(--color-text);
          letter-spacing: var(--letter-spacing-tight);
        }

        h1 {
          font-size: var(--font-size-4xl);
        }
        h2 {
          font-size: var(--font-size-3xl);
        }
        h3 {
          font-size: var(--font-size-2xl);
        }
        h4 {
          font-size: var(--font-size-xl);
        }
        h5 {
          font-size: var(--font-size-lg);
        }
        h6 {
          font-size: var(--font-size-md);
        }

        p {
          margin: 0 0 var(--space-16) 0;
        }

        a {
          color: var(--color-primary);
          text-decoration: none;
          transition: color var(--duration-fast) var(--ease-standard);
        }

        a:hover {
          color: var(--color-primary-hover);
        }

        /* Buttons */
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: var(--space-8) var(--space-16);
          border-radius: var(--radius-base);
          font-size: var(--font-size-base);
          font-weight: 500;
          line-height: 1.5;
          cursor: pointer;
          transition: all var(--duration-normal) var(--ease-smooth);
          border: none;
          text-decoration: none;
          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 var(--duration-slow) var(--ease-standard);
        }

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

        .btn:focus-visible {
          outline: none;
          box-shadow: 0 0 0 3px var(--color-focus-ring);
        }

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

        .btn--primary:hover {
          background: var(--color-primary-hover);
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(var(--color-teal-500-rgb), 0.3);
        }

        .btn--primary:active {
          background: var(--color-primary-active);
        }

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

        .btn--secondary:hover {
          background: var(--color-secondary-hover);
        }

        .btn--secondary:active {
          background: var(--color-secondary-active);
        }

        .btn--outline {
          background: transparent;
          border: 2px solid var(--dynamic-text-color);
          color: var(--dynamic-text-color);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn--outline:hover {
          background: var(--dynamic-text-color);
          color: var(--dynamic-background-color);
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .btn--lg {
          padding: var(--space-12) var(--space-24);
          font-size: var(--font-size-base);
          border-radius: var(--radius-sm);
          text-transform: uppercase;
          letter-spacing: 0.02em;
          font-weight: var(--font-weight-semibold);
        }

        /* Form elements */
        .form-control {
          display: block;
          width: 100%;
          padding: var(--space-8) var(--space-12);
          font-size: var(--font-size-md);
          line-height: 1.5;
          color: var(--color-text);
          background-color: var(--color-surface);
          border: 1px solid var(--color-border);
          border-radius: var(--radius-base);
          transition: border-color var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard);
        }

        textarea.form-control {
          font-family: var(--font-family-base);
          font-size: var(--font-size-base);
          resize: vertical;
        }

        .form-control:focus {
          border-color: var(--color-primary);
          outline: 2px solid var(--color-primary);
        }

        .form-label {
          display: block;
          margin-bottom: var(--space-8);
          font-weight: var(--font-weight-medium);
          font-size: var(--font-size-sm);
        }

        .form-group {
          margin-bottom: var(--space-16);
        }

        /* Card component */
        .card {
          background-color: var(--color-surface);
          border-radius: var(--radius-lg);
          border: 1px solid var(--color-card-border);
          box-shadow: var(--shadow-sm);
          overflow: hidden;
          transition: all var(--duration-normal) var(--ease-standard);
        }

        .card:hover {
          box-shadow: var(--shadow-md);
          transform: translateY(-2px);
        }

        .card__body {
          padding: var(--space-24);
        }

        /* Container layout */
        .container {
          width: 100%;
          max-width: var(--container-lg);
          margin-right: auto;
          margin-left: auto;
          padding-right: var(--space-16);
          padding-left: var(--space-16);
          box-sizing: border-box;
        }

        /* Projects section - reduced lateral padding for more space */
        #projects .container {
          padding-right: var(--space-8);
          padding-left: var(--space-8);
          max-width: 100%;
        }

        /* Animation Preferences - Enhanced */
        @media (prefers-reduced-motion: reduce) {
          *,
          *::before,
          *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
          }
          
          /* Disable parallax and hover transforms */
          .hero__content {
            transform: none !important;
          }
          
          .project-box:hover,
          .card:hover,
          .btn:hover {
            transform: none !important;
          }
        }

        /* Header and Navigation */
        .header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 100;
          background-color: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border-bottom: none;
          padding: var(--space-12) 0;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .logo-text {
          font-weight: var(--font-weight-bold);
          font-size: var(--font-size-xl);
          color: #000000;
          text-transform: uppercase;
          letter-spacing: var(--letter-spacing-tight);
          position: relative;
          cursor: pointer;
          overflow: visible;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          display: flex;
          align-items: center;
          height: 40px;
          min-width: 50px;
        }

        .initials {
          display: inline-block;
          font-weight: var(--font-weight-bold);
          font-size: var(--font-size-xl);
          color: #000000;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .initials.logo-img {
          width: auto;
          height: 40px;
          transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .full-name {
          position: absolute;
          left: 60px;
          top: 50%;
          transform: translateY(-50%);
          font-size: var(--font-size-base);
          font-weight: var(--font-weight-semibold);
          text-transform: uppercase;
          letter-spacing: var(--letter-spacing-tight);
          opacity: 0;
          white-space: nowrap;
          transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); /* smooth reveal -> changed from 0.3s to 0.7s*/
          color: #000000;
          max-width: calc(100vw - 100px);
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .logo-text:hover .initials {
          color: var(--color-primary);
          transform: translateX(2px);
        }

        .logo-text:hover .initials.logo-img {
          transform: translateX(2px);
          opacity: 0.8;
        }

        .logo-text:hover .full-name {
          opacity: 1;
          transform: translateY(-50%) translateX(8px);
        }

        .nav__links {
          display: flex;
          gap: var(--space-24);
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .nav__link {
          color: #333333;
          font-weight: var(--font-weight-medium);
          text-transform: uppercase;
          font-size: var(--font-size-sm);
          letter-spacing: 0.02em;
          position: relative;
          padding-bottom: var(--space-4);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav__link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--color-primary);
          transition: width var(--duration-normal) var(--ease-smooth);
        }

        .nav__link:hover {
          color: var(--color-primary);
        }

        .nav__link:hover::after {
          width: 100%;
        }

        .nav__link.active {
          color: var(--color-primary);
        }

        .nav__link.active::after {
          width: 100%;
        }

        /* Hero Section */
        .hero {
          min-height: 100vh;
          display: flex;
          align-items: center;
          background: #ffffff;
          position: relative;
          transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          padding-left: 0;
          padding-top: 120px;
          padding-bottom: 80px;
          box-sizing: border-box;
        }

        .hero__content {
          position: relative;
          z-index: 2;
          width: 100%;
          max-width: 100%;
          padding-left: clamp(40px, 5vw, 80px);
          padding-right: clamp(40px, 5vw, 80px);
          box-sizing: border-box;
        }

        .hero__title {
          font-size: clamp(36px, 6vw, 72px);
          font-weight: 700;
          margin-bottom: var(--space-20);
          color: var(--color-text);
          text-transform: uppercase;
          letter-spacing: -0.02em;
          line-height: 0.9;
          opacity: 0;
          transform: translateY(30px);
          animation: fadeInUp 0.8s var(--ease-smooth) 0.2s forwards;
        }

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

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

        .hero__subtitle {
          font-size: var(--font-size-lg);
          color: var(--color-text-secondary);
          margin-bottom: var(--space-32);
          max-width: 500px;
          font-weight: var(--font-weight-normal);
          line-height: 1.6;
          opacity: 0;
          transform: translateY(30px);
          animation: fadeInUp 0.8s var(--ease-smooth) 0.4s forwards;
        }

        .hero__actions {
          display: flex;
          gap: var(--space-20);
          flex-wrap: wrap;
          margin-top: var(--space-40);
          opacity: 0;
          transform: translateY(30px);
          animation: fadeInUp 0.8s var(--ease-smooth) 0.6s forwards;
        }



        /* Section Styles - Seamless Spacing */
        .section {
          padding: 140px 0;
          margin: 0;
          width: 100%;
          max-width: 100vw;
          box-sizing: border-box;
        }

        .section:first-of-type {
          padding-top: 160px;
        }

        .section__header {
          margin-bottom: 100px;
        }

        .section__title {
          font-family: var(--font-family-base);
          font-size: var(--font-size-3xl);
          margin-bottom: var(--space-16);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: var(--letter-spacing-tight);
          opacity: 0;
          transform: translateY(30px);
          transition: all var(--duration-slow) var(--ease-smooth);
        }

        .section__title.animate-in {
          opacity: 1;
          transform: translateY(0);
        }

        .section__subtitle {
          font-size: var(--font-size-lg);
          color: var(--color-text-secondary);
          max-width: 600px;
          margin: 0 auto;
          opacity: 0;
          transform: translateY(30px);
          transition: all var(--duration-slow) var(--ease-smooth) 0.2s;
        }

        .section__subtitle.animate-in {
          opacity: 1;
          transform: translateY(0);
        }

        /* About Section */
        .about__content {
          max-width: 800px;
          margin: 0 auto;
        }

        .about__text h3 {
          color: var(--color-text);
          margin-bottom: var(--space-16);
          font-weight: 700;
          text-transform: uppercase;
          font-size: var(--font-size-lg);
          letter-spacing: -0.01em;
        }

        .values {
          margin-top: var(--space-32);
        }

        .value-item {
          padding: var(--space-16) 0;
          border-bottom: 1px solid var(--color-border);
          font-weight: var(--font-weight-medium);
          font-size: var(--font-size-base);
        }

        .value-item:last-child {
          border-bottom: none;
        }

        /* Projects Section */
        .projects__grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: var(--space-32);
        }

        .project-card {
          border: 1px solid var(--color-border);
          transition: all var(--duration-normal) var(--ease-smooth);
          position: relative;
          overflow: hidden;
        }

        .project-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.05), transparent);
          transition: left var(--duration-slow) var(--ease-standard);
        }

        .project-card:hover {
          border-color: var(--color-primary);
          transform: translateY(-8px);
          box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }

        .project-card:hover::before {
          left: 100%;
        }

        .project-card:hover h3 {
          color: var(--color-primary);
        }

        .project-card h3 {
          color: var(--color-text);
          margin-bottom: var(--space-12);
          font-weight: 700;
          text-transform: uppercase;
          font-size: var(--font-size-lg);
          letter-spacing: -0.01em;
        }

        .project-tags {
          margin-top: var(--space-16);
        }

        .tag {
          color: var(--color-text-secondary);
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-medium);
          text-transform: uppercase;
          letter-spacing: 0.02em;
        }

        .tag:not(:last-child)::after {
          content: ' / ';
          color: var(--color-border);
        }

        /* Contact Section */
        .contact {
          background: var(--color-surface);
        }

        .contact__content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
        }

        .contact-form {
          background: var(--color-surface);
          padding: var(--space-32);
          border-radius: var(--radius-lg);
          border: 1px solid var(--color-card-border);
        }

        .contact-info h3 {
          color: var(--color-text);
          margin-bottom: var(--space-24);
          font-weight: 700;
          text-transform: uppercase;
          font-size: var(--font-size-lg);
          letter-spacing: -0.01em;
        }

        .social-links {
          display: flex;
          gap: var(--space-24);
          margin-top: var(--space-24);
        }

        .social-link {
          color: var(--color-text);
          font-weight: var(--font-weight-medium);
          text-transform: uppercase;
          font-size: var(--font-size-sm);
          letter-spacing: 0.02em;
          border-bottom: 1px solid transparent;
          transition: border-color var(--duration-fast) var(--ease-standard);
        }

        .social-link:hover {
          border-bottom-color: var(--color-primary);
          color: var(--color-primary);
          transform: translateY(-2px);
        }

        .privacy-note {
          font-size: var(--font-size-sm);
          color: var(--color-text-secondary);
          margin-top: var(--space-16);
          padding: var(--space-12) 0;
          border-top: 1px solid var(--color-border);
        }

        /* Footer */
        .footer {
          background: transparent;
          padding: var(--space-32) 0;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          z-index: 10;
          width: 100%;
          max-width: 100vw;
          display: block;
          visibility: visible;
          opacity: 1;
          margin-top: auto;
          min-height: 80px;
        }

        .footer__content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: var(--space-16);
        }

        .footer__text {
          color: #000000;
          font-size: var(--font-size-sm);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer__links {
          display: flex;
          gap: var(--space-24);
          font-size: var(--font-size-sm);
        }

        .footer__links a {
          color: #000000;
          position: relative;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer__links a::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 1px;
          background: var(--color-primary);
          transition: width var(--duration-normal) var(--ease-smooth);
        }

        .footer__links a:hover {
          color: var(--color-primary);
        }

        .footer__links a:hover::after {
          width: 100%;
        }



        /* Scroll Animation Classes */
        .fade-in {
          opacity: 0;
          transform: translateY(30px);
          transition: all var(--duration-slow) var(--ease-smooth);
        }

        .fade-in.animate-in {
          opacity: 1;
          transform: translateY(0);
        }

        /* Footer should always be visible */
        .footer .fade-in {
          opacity: 1 !important;
          transform: translateY(0) !important;
          visibility: visible !important;
        }

        /* Ensure footer is always visible and not hidden */
        .footer {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
        }

        .stagger-1 { transition-delay: 0.1s; }
        .stagger-2 { transition-delay: 0.2s; }
        .stagger-3 { transition-delay: 0.3s; }
        .stagger-4 { transition-delay: 0.4s; }
        .stagger-5 { transition-delay: 0.5s; }

        .slide-in-left {
          opacity: 0;
          transform: translateX(-50px);
          transition: all var(--duration-slow) var(--ease-smooth);
        }

        .slide-in-left.animate-in {
          opacity: 1;
          transform: translateX(0);
        }

        .slide-in-right {
          opacity: 0;
          transform: translateX(50px);
          transition: all var(--duration-slow) var(--ease-smooth);
        }

        .slide-in-right.animate-in {
          opacity: 1;
          transform: translateX(0);
        }

        .scale-in {
          opacity: 0;
          transform: scale(0.8);
          transition: all var(--duration-slow) var(--ease-bounce);
        }

        .scale-in.animate-in {
          opacity: 1;
          transform: scale(1);
        }

        /* Loading Spinner */
        .loading-spinner {
          display: inline-block;
          width: 20px;
          height: 20px;
          border: 2px solid var(--color-surface);
          border-radius: 50%;
          border-top-color: var(--color-primary);
          animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }

        /* Smooth Page Transitions */
        .page-transition {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--color-background);
          z-index: 9999;
          opacity: 0;
          pointer-events: none;
          transition: opacity var(--duration-normal) var(--ease-standard);
        }

        .page-transition.active {
          opacity: 1;
          pointer-events: all;
        }

        /* Enhanced Hover Effects */
        .about__text h3 {
          position: relative;
          cursor: default;
          transition: all var(--duration-normal) var(--ease-standard);
        }

        .about__text h3::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--color-primary);
          transition: width var(--duration-normal) var(--ease-smooth);
        }

        .about__text h3:hover::after {
          width: 40px;
        }

        .value-item {
          transition: all var(--duration-normal) var(--ease-standard);
          cursor: default;
        }

        .value-item:hover {
          color: var(--color-primary);
          padding-left: var(--space-8);
        }

        .contact-info h3 {
          position: relative;
          cursor: default;
          transition: all var(--duration-normal) var(--ease-standard);
        }

        .contact-info h3::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--color-primary);
          transition: width var(--duration-normal) var(--ease-smooth);
        }

        .contact-info h3:hover::after {
          width: 60px;
        }

        /* Enhanced tag animations */
        .tag {
          transition: all var(--duration-normal) var(--ease-standard);
          cursor: default;
        }

        .project-card:hover .tag {
          color: var(--color-text);
        }

        .project-card:hover .tag:first-child {
          color: var(--color-primary);
        }

        /* Form Enhancements */
        .form-control {
          transition: all var(--duration-normal) var(--ease-standard);
        }

        .form-control:focus {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(var(--color-teal-500-rgb), 0.15);
        }

        .form-group {
          opacity: 0;
          transform: translateY(20px);
          transition: all var(--duration-normal) var(--ease-smooth);
        }

        .form-group.animate-in {
          opacity: 1;
          transform: translateY(0);
        }

        .form-group.focused .form-label {
          color: var(--color-primary);
          transform: translateY(-2px);
        }

        /* About Page Bold Opening Statement */
        .about-hero-statement {
          margin-bottom: var(--space-80);
          padding: var(--space-60) 0;
        }
        
        .about-opening-statement {
          font-family: var(--font-family-base);
          font-size: clamp(48px, 8vw, 80px);
          font-weight: 700;
          margin: 0;
          padding: 0;
          color: #000000;
          text-transform: uppercase;
          letter-spacing: -0.02em;
          line-height: 0.9;
          text-align: left;
          max-width: 100%;
          width: 100%;
          word-wrap: break-word;
          overflow-wrap: break-word;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Header positioned at top without ticker */
        .header {
          top: 0;
        }


        /* Left-Aligned Typography - Much Larger Scale */
        .hero__flat-text {
          font-family: var(--font-family-base);
          font-size: clamp(40px, 10vw, 100px);
          font-weight: 700;
          margin: 0;
          padding: 0;
          color: #000000;
          text-transform: uppercase;
          letter-spacing: -0.02em;
          line-height: 0.9;
          text-align: left;
          max-width: 100%;
          width: 100%;
          word-wrap: break-word;
          overflow-wrap: break-word;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Scroll Indicator */
        .scroll-indicator {
          position: relative;
          margin-top: 80px;
          display: flex;
          flex-direction: column;
          align-items: center;
          opacity: 0;
          animation: fadeInUp 0.8s var(--ease-smooth) 0.8s forwards;
        }

        .scroll-line {
          width: 2px;
          height: 60px;
          background: linear-gradient(to bottom, 
            transparent 0%, 
            currentColor 20%, 
            currentColor 80%, 
            transparent 100%);
          position: relative;
          overflow: hidden;
          animation: scrollLineMove 2s ease-in-out infinite;
          transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .scroll-line::before {
          content: '';
          position: absolute;
          top: -100%;
          left: 0;
          width: 100%;
          height: 100%;
          background: currentColor;
          animation: scrollLineSlide 2s ease-in-out infinite;
        }

        @keyframes scrollLineMove {
          0% {
            opacity: 0.6;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0.6;
          }
        }

        @keyframes scrollLineSlide {
          0% {
            top: -100%;
            opacity: 0;
          }
          50% {
            top: 0%;
            opacity: 1;
          }
          100% {
            top: 100%;
            opacity: 0;
          }
        }

        /* Section Headers - Clean, No Underlines for Seamless Design */
        .section__title.underlined {
          position: relative;
          display: inline-block;
          margin-bottom: var(--space-60);
        }

        /* CURRENTLY Title - Geometric Sans Serif with Outline */
        .section__title.underlined.currently-title {
          font-family: 'Arial Black';
          font-weight: 400; /* Bebas Neue is already bold by default */
          letter-spacing: 0.1em;
          -webkit-text-stroke: 3px currentColor;
          -webkit-text-fill-color: transparent;
          color: transparent;
          font-size: clamp(72px, 12vw, 140px);
          line-height: 1;
          position: relative;
          left: 0;
          margin-left: 0;
          padding-left: 30px;
        }

        /* Align CURRENTLY section header to left edge of viewport */
        #current .section__header {
          position: relative;
          left: calc(-50vw + 50%);
          width: 100vw;
          padding-left: var(--space-16);
          margin-left: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        /* CURRENTLY Gradient Box - Vanta.js Fog background */
        .currently-gradient-box {
          padding: var(--space-40) var(--space-60);
          border-radius: 0;
          position: relative;
          min-height: 400px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: calc(100% - 60px);
          max-width: calc(100vw - 60px);
          margin-top: -85px;
          margin-left: 30px;
          margin-right: 30px;
          box-sizing: border-box;
          z-index: 1;
        }
        
        /* Ensure CURRENTLY title is behind the gradient box */
        .section__title.underlined.currently-title {
          position: relative;
          z-index: 0;
        }
        
        /* Ensure Vanta canvas covers the entire div */
        .currently-gradient-box canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }
        
        /* Content above Vanta canvas */
        .currently-gradient-box h3,
        .currently-gradient-box p {
          position: relative;
          z-index: 1;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Super-bold compact font for h3 */
        .currently-gradient-box h3 {
          font-family: 'Oswald', 'Arial Black', 'Arial Bold', sans-serif;
          font-weight: 700;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          line-height: 1.2;
          font-size: clamp(32px, 5vw, 56px);
          margin-bottom: var(--space-16);
          color: #ffffff;
        }
        
        /* Outline style for paragraph (like CURRENTLY) */
        .currently-gradient-box p {
          font-family: 'Arial Black', 'Arial Bold', sans-serif;
          font-weight: 400;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          font-size: clamp(16px, 2.5vw, 24px);
          line-height: 1;
          -webkit-text-stroke: 1px #ffffff;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }
        
        /* @unibz label in bottom right corner */
        .currently-gradient-box .unibz-label {
          position: absolute;
          bottom: var(--space-20);
          right: var(--space-32);
          font-family: 'Oswald', 'Arial Black', 'Arial Bold', sans-serif;
          font-weight: 700;
          font-size: clamp(14px, 2vw, 20px);
          color: #ffffff;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          z-index: 2;
        }

        /* Two-Column Layout */
        .two-column-layout {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: var(--space-80);
          align-items: start;
        }

        .content-column h3 {
          font-family: var(--font-family-base);
          font-size: var(--font-size-xl);
          font-weight: var(--font-weight-bold);
          margin-bottom: var(--space-24);
          color: #000000;
          line-height: 1.2;
          letter-spacing: var(--letter-spacing-tight);
          text-transform: uppercase;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .content-column p {
          font-family: var(--font-family-base);
          font-size: var(--font-size-base);
          line-height: 1.5;
          margin-bottom: var(--space-20);
          color: #000000;
          letter-spacing: normal;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .info-column {
          display: flex;
          flex-direction: column;
          gap: var(--space-40);
        }

        .info-block h4 {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-semibold);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #333333;
          margin-bottom: var(--space-16);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .info-item {
          display: flex;
          flex-direction: column;
          gap: var(--space-4);
          margin-bottom: var(--space-12);
        }

        .info-label {
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-medium);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #333333;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .info-value {
          font-size: var(--font-size-sm);
          color: #000000;
          font-weight: var(--font-weight-medium);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Structured Data Tables */
        .structured-tables {
          max-width: 100%;
        }

        .table-container {
          margin-bottom: var(--space-60);
        }

        .table-container h3 {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-semibold);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #333333;
          margin-bottom: var(--space-16);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .data-table {
          width: 100%;
          border-collapse: collapse;
          font-size: var(--font-size-sm);
          transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .data-table th {
          text-align: left;
          padding: var(--space-12) var(--space-16);
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-semibold);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #333333;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .data-table td {
          padding: var(--space-16);
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          color: #000000;
          font-weight: var(--font-weight-medium);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .data-table tr:hover {
          background: rgba(128, 128, 128, 0.1);
          transition: background-color 0.2s ease;
        }

        /* About Section Spacing */
        .about-section {
          margin-bottom: var(--space-60);
        }

        /* Experience Items */
        .experience-item {
          margin-bottom: var(--space-24);
        }

        .experience-item:last-child {
          margin-bottom: 0;
        }

        .experience-title {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-semibold);
          color: #000000;
          margin-bottom: var(--space-4);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .experience-subtitle {
          font-size: var(--font-size-xs);
          color: #333333;
          margin-bottom: var(--space-4);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .experience-period {
          font-size: var(--font-size-xs);
          color: #666666;
          font-weight: var(--font-weight-medium);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Expertise Grid */
        .expertise-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--space-60);
        }

        .expertise-column h3 {
          font-size: var(--font-size-lg);
          font-weight: var(--font-weight-bold);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #333333;
          margin-bottom: var(--space-20);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .expertise-description {
          font-size: var(--font-size-sm);
          color: #666666;
          line-height: 1.6;
          margin-bottom: var(--space-24);
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .expertise-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .expertise-list li {
          padding: var(--space-8) 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-medium);
          color: #000000;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .expertise-list li:hover {
          color: var(--color-primary);
          padding-left: var(--space-8);
        }

        .expertise-list li:last-child {
          border-bottom: none;
        }

        /* AFFILIATIONS Title - Geometric Sans Serif with Outline */
        .section__title.underlined.affiliations-title {
          font-family: 'Arial Black';
          font-weight: 400;
          letter-spacing: 0.1em;
          -webkit-text-stroke: 3px currentColor;
          -webkit-text-fill-color: transparent;
          color: transparent;
          font-size: clamp(72px, 12vw, 140px);
          line-height: 1;
          position: relative;
          left: 0;
          margin-left: 0;
          padding-left: 30px;
          z-index: 0;
        }

        /* Align AFFILIATIONS section header to left edge of viewport */
        .affiliations-header {
          position: relative;
          left: calc(-50vw + 50%);
          width: 100vw;
          padding-left: var(--space-16);
          margin-left: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        /* AFFILIATIONS Gradient Box - Vanta.js Fog background */
        .affiliations-gradient-box {
          padding: var(--space-40) var(--space-60);
          border-radius: 0;
          position: relative;
          min-height: 400px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: calc(100% - 60px);
          max-width: calc(100vw - 60px);
          margin-top: -85px;
          margin-left: 30px;
          margin-right: 30px;
          box-sizing: border-box;
          z-index: 1;
        }
        
        /* Ensure Vanta canvas covers the entire div */
        .affiliations-gradient-box canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }
        
        /* Content above Vanta canvas */
        .affiliations-gradient-box .affiliations-logo-grid {
          position: relative;
          z-index: 1;
        }

        /* Loghi dentro il box Vanta - più visibili */
        .affiliations-gradient-box .affiliation-logo {
          filter: grayscale(100%) opacity(0.8) brightness(1.5);
        }

        .affiliations-gradient-box .affiliation-logo:hover {
          filter: grayscale(0%) opacity(1) brightness(1.2);
          transform: translateY(-2px) scale(1.05);
        }

        .affiliations-gradient-box .affiliation-logo-white {
          filter: brightness(0) invert(1) grayscale(100%) opacity(0.8) brightness(1.5);
        }

        .affiliations-gradient-box .affiliation-logo-white:hover {
          filter: brightness(0) invert(1) grayscale(0%) opacity(1) brightness(1.2);
          transform: translateY(-2px) scale(1.05);
        }

        .affiliations-gradient-box .affiliation-logo-ey:hover {
          filter: grayscale(0%) opacity(1) brightness(1.2);
          transform: translateY(-2px) scale(1.05);
        }

        /* Affiliations Logo Grid */
        .affiliations-logo-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: var(--space-40);
          max-width: 1000px;
          margin: 0 auto;
        }

        .logo-item {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 80px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .logo-placeholder {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 120px;
          height: 60px;
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-bold);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: rgba(0, 0, 0, 0.4);
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: var(--radius-sm);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          background: rgba(0, 0, 0, 0.02);
        }

        .logo-placeholder:hover {
          color: rgba(0, 0, 0, 0.7);
          border-color: rgba(0, 0, 0, 0.2);
          transform: translateY(-2px);
        }

        .affiliation-logo {
          max-width: 100%;
          max-height: 80px;
          width: auto;
          height: auto;
          object-fit: contain;
          filter: grayscale(100%) opacity(0.6);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .affiliation-logo:hover {
          filter: grayscale(0%) opacity(1);
          transform: translateY(-2px) scale(1.05);
        }

        /* Loghi bianchi (converti nero in bianco) */
        .affiliation-logo-white {
          filter: brightness(0) invert(1) grayscale(100%) opacity(0.6);
        }

        .affiliation-logo-white:hover {
          filter: brightness(0) invert(1) grayscale(0%) opacity(1);
          transform: translateY(-2px) scale(1.05);
        }

        /* Logo EY: mostra colori originali all'hover */
        .affiliation-logo-ey:hover {
          filter: grayscale(0%) opacity(1);
          transform: translateY(-2px) scale(1.05);
        }

        /* Dark mode affiliations */
        @media (prefers-color-scheme: dark) {
          .logo-placeholder {
            color: rgba(255, 255, 255, 0.4);
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.02);
          }
          .logo-placeholder:hover {
            color: rgba(255, 255, 255, 0.7);
            border-color: rgba(255, 255, 255, 0.2);
          }
          .affiliation-logo {
            filter: grayscale(100%) opacity(0.5) brightness(1.2);
          }
          .affiliation-logo:hover {
            filter: grayscale(0%) opacity(1) brightness(1);
          }
          .affiliation-logo-white {
            filter: brightness(0) invert(1) grayscale(100%) opacity(0.5) brightness(1.2);
          }
          .affiliation-logo-white:hover {
            filter: brightness(0) invert(1) grayscale(0%) opacity(1) brightness(1);
          }
          .affiliation-logo-ey:hover {
            filter: grayscale(0%) opacity(1) brightness(1);
          }
        }

        /* Contact Section Simplified */
        #contact.section {
          padding-bottom: 60px !important;
          
          padding-top: 0px !important;
        }
        
        .contact-simple {
          text-align: center;
          max-width: 600px;
          margin: 0 auto;
        }

        .contact-statement {
          font-family: var(--font-family-base);
          font-size: var(--font-size-xl);
          font-weight: var(--font-weight-semibold);
          margin-bottom: var(--space-40);
          color: #000000;
          line-height: 1.3;
          letter-spacing: normal;
          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .contact-links {
          display: flex;
          justify-content: center;
          gap: var(--space-40);
          flex-wrap: wrap;
        }

        .contact-link {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-semibold);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #000000;
          text-decoration: none;
          position: relative;
          padding-bottom: var(--space-4);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .contact-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background: var(--color-primary);
          transition: width var(--duration-normal) var(--ease-smooth);
        }

        .contact-link:hover {
          color: var(--color-primary);
        }

        .contact-link:hover::after {
          width: 100%;
        }

        /* Contact Sidebar - Minimalist */
        .contact-sidebar {
          position: fixed;
          right: var(--space-24);
          top: 50%;
          transform: translateY(-50%);
          z-index: 150;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: var(--radius-base);
          padding: var(--space-8);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          max-width: calc(100vw - var(--space-24) * 2);
        }

        .sidebar-content {
          display: flex;
          flex-direction: column;
          gap: var(--space-8);
        }

        .sidebar-links {
          display: flex;
          flex-direction: column;
          gap: var(--space-8);
        }

        .sidebar-links a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-semibold);
          text-transform: uppercase;
          color: #333333;
          text-decoration: none;
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: var(--radius-sm);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          background: rgba(255, 255, 255, 0.5);
        }

        .sidebar-links a:hover {
          background: var(--color-primary);
          color: var(--color-btn-primary-text);
          border-color: var(--color-primary);
          transform: translateX(-2px);
        }


        /* Portfolio Grid Styles */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 0 var(--space-16);
        }

        /* New Card Animation Styles */
        .card.portfolio-item {
            width: 100%;
            height: 100%;
            min-height: 400px;
            background: #1a1a1a;
            border-radius: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            box-shadow: 0 14px 26px rgba(0,0,0,0.04);
            transition: all 0.3s ease-out;
            text-decoration: none;
        }
        
        /* Center circle independently from text */

        /* Color variants for each card type */
        .card.portfolio-item.education {
            --bg-color: #ffd861;
            --bg-color-light: #ffeeba;
            --text-color-hover: #4C5656;
            --box-shadow-color: rgba(255, 215, 97, 0.48);
        }

        .card.portfolio-item.credentialing {
            --bg-color: #B8F9D3;
            --bg-color-light: #e2fced;
            --text-color-hover: #4C5656;
            --box-shadow-color: rgba(184, 249, 211, 0.48);
        }

        .card.portfolio-item.wallet {
            --bg-color: #CEB2FC;
            --bg-color-light: #F0E7FF;
            --text-color-hover: #fff;
            --box-shadow-color: rgba(206, 178, 252, 0.48);
        }

        .card.portfolio-item.human-resources {
            --bg-color: #DCE9FF;
            --bg-color-light: #f1f7ff;
            --text-color-hover: #4C5656;
            --box-shadow-color: rgba(220, 233, 255, 0.48);
        }

        .card.portfolio-item:hover {
            transform: translateY(-5px) scale(1.005) translateZ(0);
            box-shadow: 0 24px 36px rgba(0,0,0,0.11),
                0 24px 46px var(--box-shadow-color);
        }

        .card.portfolio-item:hover .overlay {
            opacity: 0;
        }
        
        /* Card hover image - expands from center like overlay */
        .card.portfolio-item .card-hover-image {
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            opacity: 0;
            z-index: 0;
            transition: all 0.3s ease-out;
            filter: grayscale(100%) brightness(0.7);
        }
        
        .card.portfolio-item:hover .card-hover-image {
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
        }
        
        /* Color mask overlay for images - creates color tinted shades */
        .card.portfolio-item .card-image-mask {
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: transparent;
            opacity: 0;
            pointer-events: none;
            z-index: 1;
            transition: all 0.3s ease-out;
            mix-blend-mode: color;
        }
        
        .card.portfolio-item:hover .card-image-mask {
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
        }
        
        /* Card 1 - education (first) */
        .portfolio-grid > .card.portfolio-item.education:nth-child(1) .card-image-mask {
            background-color: #a4a398;
        }
        
        /* Card 2 - credentialing (first) */
        .portfolio-grid > .card.portfolio-item.credentialing:nth-child(2) .card-image-mask {
            background-color: #313634;
        }
        
        /* Card 3 - wallet */
        .card.portfolio-item.wallet .card-image-mask {
            background-color: #f2fe00;
        }
        
        /* Card 4 - human-resources */
        .card.portfolio-item.human-resources .card-image-mask {
            background-color: #961c0c;
        }
        
        /* Card 5 - education (second) */
        .portfolio-grid > .card.portfolio-item.education:nth-child(5) .card-image-mask {
            background-color: #c9ad42;
        }
        
        /* Card 6 - credentialing (second) */
        .portfolio-grid > .card.portfolio-item.credentialing:nth-child(6) .card-image-mask {
            background-color: #fff242;
        }

        /* Card numbers - styled like CURRENTLY */
        .card.portfolio-item .card-number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Arial Black', 'Arial Bold', sans-serif;
            font-weight: 400;
            font-size: clamp(80px, 12vw, 140px);
            letter-spacing: 0.1em;
            -webkit-text-stroke: 2px #ffffff;
            -webkit-text-fill-color: transparent;
            color: transparent;
            line-height: 1;
            z-index: 2;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease-out;
        }
        
        .card.portfolio-item:hover .card-number {
            opacity: 0;
        }

        .card.portfolio-item:hover p {
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }
        
        .card.portfolio-item p {
            opacity: 1;
            transition: opacity 0.3s ease-out;
        }

        .card.portfolio-item:active {
            transform: scale(1) translateZ(0);
            box-shadow: 0 15px 24px rgba(0,0,0,0.11),
                0 15px 24px var(--box-shadow-color);
        }

        .card.portfolio-item p {
            font-size: 17px;
            color: #ffffff;
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            transition: color 0.3s ease-out;
            font-family: var(--font-family-base);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0;
            text-align: center;
        }

        .card.portfolio-item .overlay {
            display: none;
        }


        /* Legacy support for project-box class */
        .project-box {
            background-color: #2a2a2a;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        /* Global color change on project hover - Base transition */
        body.project-hover-active {
            transition: background-color 0.5s ease-in,
                        color 0.8s ease-out;
        }

        /* Apply smooth transitions to all elements that change color */
        body.project-hover-active *,
        body.project-hover-1 *,
        body.project-hover-2 *,
        body.project-hover-3 *,
        body.project-hover-4 *,
        body.project-hover-5 *,
        body.project-hover-6 * {
            transition: background-color 0.8s ease-out,
                        color 0.8s ease-out,
                        filter 0.8s ease-out;
        }

        /* Project 1 - Beige */
        body.project-hover-1,
        body.project-hover-1 .header,
        body.project-hover-1 .hero,
        body.project-hover-1 .section,
        body.project-hover-1 .footer {
            background-color: #c6c4b9 !important;
        }

        body.project-hover-1 .hero__flat-text,
        body.project-hover-1 .nav__brand,
        body.project-hover-1 .nav__link,
        body.project-hover-1 .section__title,
        body.project-hover-1 .footer__text,
        body.project-hover-1 .footer__links a,
        body.project-hover-1 .contact-link,
        body.project-hover-1 .contact-statement,
        body.project-hover-1 h1,
        body.project-hover-1 h2,
        body.project-hover-1 h3,
        body.project-hover-1 h4,
        body.project-hover-1 p,
        body.project-hover-1 .content-column h3,
        body.project-hover-1 .content-column p,
        body.project-hover-1 .current-project-content h3,
        body.project-hover-1 .current-project-content p,
        body.project-hover-1 .about-opening-statement,
        body.project-hover-1 .info-block h4,
        body.project-hover-1 .experience-title,
        body.project-hover-1 .experience-subtitle,
        body.project-hover-1 .expertise-column h3,
        body.project-hover-1 .expertise-description,
        body.project-hover-1 .expertise-list li {
            color: #000000 !important;
        }

        body.project-hover-1 .initials.logo-img {
            filter: none !important;
        }

        body.project-hover-1 .project-box,
        body.project-hover-1 .card.portfolio-item {
            background-color: #cccac0 !important;
        }

        /* Project 2 - Dark Gray */
        body.project-hover-2,
        body.project-hover-2 .header,
        body.project-hover-2 .hero,
        body.project-hover-2 .section,
        body.project-hover-2 .footer {
            background-color: #2b2e2e !important;
        }

        body.project-hover-2 .hero__flat-text,
        body.project-hover-2 .nav__brand,
        body.project-hover-2 .nav__link,
        body.project-hover-2 .section__title,
        body.project-hover-2 .footer__text,
        body.project-hover-2 .footer__links a,
        body.project-hover-2 .contact-link,
        body.project-hover-2 .contact-statement,
        body.project-hover-2 h1,
        body.project-hover-2 h2,
        body.project-hover-2 h3,
        body.project-hover-2 h4,
        body.project-hover-2 p,
        body.project-hover-2 .content-column h3,
        body.project-hover-2 .content-column p,
        body.project-hover-2 .current-project-content h3,
        body.project-hover-2 .current-project-content p,
        body.project-hover-2 .about-opening-statement,
        body.project-hover-2 .info-block h4,
        body.project-hover-2 .experience-title,
        body.project-hover-2 .experience-subtitle,
        body.project-hover-2 .expertise-column h3,
        body.project-hover-2 .expertise-description,
        body.project-hover-2 .expertise-list li {
            color: #ffffff !important;
        }

        body.project-hover-2 .initials.logo-img {
            filter: invert(1) brightness(1.2) !important;
        }

        body.project-hover-2 .project-box,
        body.project-hover-2 .card.portfolio-item {
            background-color: #414343 !important;
        }

        /* Project 3 - Cyan Blue */
        body.project-hover-3,
        body.project-hover-3 .header,
        body.project-hover-3 .hero,
        body.project-hover-3 .section,
        body.project-hover-3 .footer {
            background-color: #07b0f3 !important;
        }

        body.project-hover-3 .hero__flat-text,
        body.project-hover-3 .nav__brand,
        body.project-hover-3 .nav__link,
        body.project-hover-3 .section__title,
        body.project-hover-3 .footer__text,
        body.project-hover-3 .footer__links a,
        body.project-hover-3 .contact-link,
        body.project-hover-3 .contact-statement,
        body.project-hover-3 h1,
        body.project-hover-3 h2,
        body.project-hover-3 h3,
        body.project-hover-3 h4,
        body.project-hover-3 p,
        body.project-hover-3 .content-column h3,
        body.project-hover-3 .content-column p,
        body.project-hover-3 .current-project-content h3,
        body.project-hover-3 .current-project-content p,
        body.project-hover-3 .about-opening-statement,
        body.project-hover-3 .info-block h4,
        body.project-hover-3 .experience-title,
        body.project-hover-3 .experience-subtitle,
        body.project-hover-3 .expertise-column h3,
        body.project-hover-3 .expertise-description,
        body.project-hover-3 .expertise-list li {
            color: #000000 !important;
        }

        body.project-hover-3 .initials.logo-img {
            filter: none !important;
        }

        body.project-hover-3 .project-box,
        body.project-hover-3 .card.portfolio-item {
            background-color: #20b8f4 !important;
        }

        /* Project 4 - Dark Red */
        body.project-hover-4,
        body.project-hover-4 .header,
        body.project-hover-4 .hero,
        body.project-hover-4 .section,
        body.project-hover-4 .footer {
            background-color: #941608 !important;
        }

        body.project-hover-4 .hero__flat-text,
        body.project-hover-4 .nav__brand,
        body.project-hover-4 .nav__link,
        body.project-hover-4 .section__title,
        body.project-hover-4 .footer__text,
        body.project-hover-4 .footer__links a,
        body.project-hover-4 .contact-link,
        body.project-hover-4 .contact-statement,
        body.project-hover-4 h1,
        body.project-hover-4 h2,
        body.project-hover-4 h3,
        body.project-hover-4 h4,
        body.project-hover-4 p,
        body.project-hover-4 .content-column h3,
        body.project-hover-4 .content-column p,
        body.project-hover-4 .current-project-content h3,
        body.project-hover-4 .current-project-content p,
        body.project-hover-4 .about-opening-statement,
        body.project-hover-4 .info-block h4,
        body.project-hover-4 .experience-title,
        body.project-hover-4 .experience-subtitle,
        body.project-hover-4 .expertise-column h3,
        body.project-hover-4 .expertise-description,
        body.project-hover-4 .expertise-list li {
            color: #ffffff !important;
        }

        body.project-hover-4 .initials.logo-img {
            filter: invert(1) brightness(1.2) !important;
        }

        body.project-hover-4 .project-box,
        body.project-hover-4 .card.portfolio-item {
            background-color: #9f2e21 !important;
        }

        /* Project 5 - Dark Gray/Black */
        body.project-hover-5,
        body.project-hover-5 .header,
        body.project-hover-5 .hero,
        body.project-hover-5 .section,
        body.project-hover-5 .footer {
            background-color: #222222 !important;
        }

        body.project-hover-5 .hero__flat-text,
        body.project-hover-5 .nav__brand,
        body.project-hover-5 .nav__link,
        body.project-hover-5 .section__title,
        body.project-hover-5 .footer__text,
        body.project-hover-5 .footer__links a,
        body.project-hover-5 .contact-link,
        body.project-hover-5 .contact-statement,
        body.project-hover-5 h1,
        body.project-hover-5 h2,
        body.project-hover-5 h3,
        body.project-hover-5 h4,
        body.project-hover-5 p,
        body.project-hover-5 .content-column h3,
        body.project-hover-5 .content-column p,
        body.project-hover-5 .current-project-content h3,
        body.project-hover-5 .current-project-content p,
        body.project-hover-5 .about-opening-statement,
        body.project-hover-5 .info-block h4,
        body.project-hover-5 .experience-title,
        body.project-hover-5 .experience-subtitle,
        body.project-hover-5 .expertise-column h3,
        body.project-hover-5 .expertise-description,
        body.project-hover-5 .expertise-list li {
            color: #ffffff !important;
        }

        body.project-hover-5 .initials.logo-img {
            filter: invert(1) brightness(1.2) !important;
        }

        body.project-hover-5 .project-box,
        body.project-hover-5 .card.portfolio-item {
            background-color: #393939 !important;
        }

        /* Project 6 - Yellow/Green */
        body.project-hover-6,
        body.project-hover-6 .header,
        body.project-hover-6 .hero,
        body.project-hover-6 .section,
        body.project-hover-6 .footer {
            background-color: #e6e147 !important;
        }

        body.project-hover-6 .hero__flat-text,
        body.project-hover-6 .nav__brand,
        body.project-hover-6 .nav__link,
        body.project-hover-6 .section__title,
        body.project-hover-6 .footer__text,
        body.project-hover-6 .footer__links a,
        body.project-hover-6 .contact-link,
        body.project-hover-6 .contact-statement,
        body.project-hover-6 h1,
        body.project-hover-6 h2,
        body.project-hover-6 h3,
        body.project-hover-6 h4,
        body.project-hover-6 p,
        body.project-hover-6 .content-column h3,
        body.project-hover-6 .content-column p,
        body.project-hover-6 .current-project-content h3,
        body.project-hover-6 .current-project-content p,
        body.project-hover-6 .about-opening-statement,
        body.project-hover-6 .info-block h4,
        body.project-hover-6 .experience-title,
        body.project-hover-6 .experience-subtitle,
        body.project-hover-6 .expertise-column h3,
        body.project-hover-6 .expertise-description,
        body.project-hover-6 .expertise-list li {
            color: #000000 !important;
        }

        body.project-hover-6 .initials.logo-img {
            filter: none !important;
        }

        body.project-hover-6 .project-box,
        body.project-hover-6 .card.portfolio-item {
            background-color: #e9e45a !important;
        }

        .project-text {
            color: #ffffff;
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            text-transform: uppercase;
            letter-spacing: var(--letter-spacing-tight);
            text-align: center;
            padding: var(--space-24);
            opacity: 1;
            transition: opacity 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .project-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
        }

        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .project-box:hover .project-text {
            opacity: 0;
        }

        .project-box:hover .project-image {
            opacity: 1;
        }

        /* Tablet responsive */
        @media (max-width: 1024px) {
            .portfolio-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 2rem;
            }
            
            .card,
            .project-box {
                min-height: 350px;
            }
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            
            .card.portfolio-item {
                aspect-ratio: 1;
                min-height: 0;
                height: 100%;
                width: 100%;
            }
            
            .project-box {
                min-height: 300px;
            }
        }

        /* Performance Optimizations */
        .project-image img {
          will-change: opacity;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }
        
        .card,
        .project-box {
          will-change: transform;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }
        
        /* Throttle hover effects for performance */
        .card:hover,
        .project-box:hover {
          transition: transform var(--duration-normal) var(--ease-standard),
                      box-shadow var(--duration-normal) var(--ease-standard);
        }
        
        /* Lazy loading optimization */
        img[loading="lazy"] {
          opacity: 0;
          transition: opacity var(--duration-normal) var(--ease-standard);
        }
        
        img[loading="lazy"].loaded {
          opacity: 1;
        }
        
        /* Enhanced Color Contrast - WCAG AA Compliance */
        .hero__flat-text {
          color: #000000; /* 21:1 contrast ratio */
        }
        
        .nav__link {
          color: #1a1a1a; /* 16.75:1 contrast ratio */
        }
        
        .footer__text,
        .footer__links a {
          color: #1a1a1a; /* 16.75:1 contrast ratio */
        }
        
        /* Dark mode high contrast */
        @media (prefers-color-scheme: dark) {
          .hero__flat-text {
            color: #ffffff; /* 21:1 contrast ratio on dark background */
          }
          
          .nav__link {
            color: #f5f5f5; /* 16.75:1 contrast ratio */
          }
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
          .nav__links {
            display: flex;
          }

          .nav__brand-name {
            display: none;
          }

          .hero__content {
            padding-left: var(--space-16);
            padding-right: var(--space-16);
            max-width: 100%;
            box-sizing: border-box;
          }

          .hero__flat-text {
            font-size: clamp(36px, 10vw, 72px);
            max-width: 100%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            padding: 0 var(--space-16);
            box-sizing: border-box;
          }

          .logo-ticker {
            height: 32px;
          }

          .ticker-item {
            min-width: 80px;
            font-size: 10px;
          }

          .header {
            top: 0;
          }

          .hero {
            padding-top: 0;
            align-items: center;
            justify-content: flex-start;
            min-height: 100vh;
          }
          
          .hero__content {
            width: 100%;
          }

          .hero__actions {
            flex-direction: column;
            align-items: flex-start;
          }

          .two-column-layout {
            grid-template-columns: 1fr;
            gap: var(--space-40);
          }

          .expertise-grid {
            grid-template-columns: 1fr;
            gap: var(--space-40);
          }

          .affiliations-logo-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-20);
          }

          .portfolio-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            max-width: 100%;
            width: 100%;
          }
          
          .card.portfolio-item {
            aspect-ratio: 1;
            min-height: 0;
            height: 100%;
            width: 100%;
          }
          
          .project-box {
            aspect-ratio: 1;
            min-height: 0;
            height: 100%;
            width: 100%;
          }

          .current-projects {
            text-align: center;
          }

          .current-project-content h3 {
            font-size: var(--font-size-lg);
          }

          /* CURRENTLY section mobile adjustments */
          #current .section__header {
            left: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            padding-left: var(--space-16) !important;
            padding-right: var(--space-16) !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
          }

          .section__title.underlined.currently-title {
            font-size: clamp(32px, 9vw, 52px) !important;
            padding-left: 0 !important;
            padding-right: var(--space-16) !important;
            -webkit-text-stroke: 2px currentColor !important;
            max-width: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
            white-space: nowrap !important;
            letter-spacing: 0.03em !important;
          }

          .currently-gradient-box {
            padding: var(--space-24) var(--space-20) !important;
            min-height: 300px !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-top: -40px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
          }

          .currently-gradient-box h3 {
            font-size: clamp(24px, 6vw, 32px) !important;
            margin-bottom: var(--space-12) !important;
          }

          .currently-gradient-box p {
            font-size: clamp(12px, 3vw, 16px) !important;
            line-height: 1.3 !important;
          }

          .currently-gradient-box .unibz-label {
            bottom: var(--space-12) !important;
            right: var(--space-16) !important;
            font-size: var(--font-size-xs) !important;
          }

          .expertise-grid-simple {
            grid-template-columns: 1fr;
            gap: var(--space-20);
          }

          .contact-links {
            flex-direction: column;
            gap: var(--space-20);
          }

          .contact-sidebar {
            position: static;
            right: auto;
            top: auto;
            transform: none;
            margin: var(--space-32) auto;
            width: fit-content;
            max-width: 100%;
          }
          
          /* Improved mobile navigation */
          .nav__brand {
            font-size: var(--font-size-base);
          }
          
          .full-name {
            display: none; /* Hide on mobile to save space */
          }
          
          /* Better mobile touch targets */
          .project-box,
          .contact-link,
          .nav__link {
            min-height: 44px; /* iOS accessibility guideline */
            min-width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          /* Mobile-specific accessibility improvements */
          .portfolio-grid {
            gap: 1.5rem; /* Larger gaps for easier touch navigation */
          }
          
          .contact-links {
            gap: var(--space-32); /* Larger touch targets */
          }

          .sidebar-links {
            flex-direction: row;
            gap: var(--space-12);
          }

          .footer__content {
            text-align: center;
            flex-direction: column;
            gap: var(--space-16);
          }

          .footer__links {
            justify-content: center;
            flex-wrap: wrap;
          }

          .footer {
            padding: var(--space-24) 0;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 10 !important;
            margin-top: var(--space-40);
            background: transparent !important;
          }

          .footer .fade-in {
            opacity: 1 !important;
            transform: translateY(0) !important;
            visibility: visible !important;
          }

          /* Ensure footer is not hidden by any other element */
          body {
            padding-bottom: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
          }

          main {
            flex: 1;
          }

          .footer {
            margin-top: auto;
          }

          .data-table {
            font-size: var(--font-size-xs);
          }

          .data-table th,
          .data-table td {
            padding: var(--space-8) var(--space-12);
          }
        }

        @font-face {
          font-family: 'FKGroteskNeue';
          src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
            format('woff2');
        }

        /* Custom cursor pulse animation */
        .custom-cursor {
          position: fixed;
          width: 20px;
          height: 20px;
          border: 2px solid var(--color-primary);
          border-radius: 50%;
          pointer-events: none;
          z-index: 9999;
          transition: transform 0.1s ease, border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
          opacity: 0;
          transform: translate(-50%, -50%);
        }

        /* Enhanced pulse with shadow for interactive elements */
        .custom-cursor.pulse {
          animation: cursorPulseWithShadow 1.5s ease-in-out infinite;
        }

        @keyframes cursorPulseWithShadow {
          0%, 100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(33, 140, 158, 0.5),
                        0 0 0 0 rgba(33, 140, 158, 0.3);
          }
          50% {
            transform: translate(-50%, -50%) scale(1.4);
            opacity: 0.9;
            box-shadow: 0 0 0 12px rgba(33, 140, 158, 0),
                        0 0 0 24px rgba(33, 140, 158, 0);
          }
        }