/* =====================================================
   RESPONSIVE BREAKPOINTS QUICK REFERENCE
   ===================================================== */

     /**
 * BREAKPOINT SYSTEM OVERVIEW
 * 
 * Device Type          | Range            | Layout Strategy
 * ---------------------|------------------|------------------
 * Ultra-Small Mobile   | ≤ 480px         | Single column, full-width nav
 * Small Tablets/Phones | 481px - 768px   | 2 columns, drawer nav
 * Tablets              | 769px - 1024px  | 2 columns, compact nav
 * Desktop              | ≥ 1025px        | Multi-column, inline nav
 */

     /* ==========================================================================
   Enhanced Portfolio CSS - Optimized & Corrected Version
   ========================================================================== */

     /* CSS Reset and Base Styles */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     /* Smooth Scrolling for entire page */
     html {
         scroll-behavior: smooth;
         scroll-padding-top: 80px;
         /* Offset for fixed header */
     }

     :root {
         /* Enhanced Color System (Glassy Theme) */
         --primary: #007AFF;
         --primary-dark: #0056CC;
         --primary-light: #60c7ff;
         --background: #F2F2F7;
         --surface: rgba(255, 255, 255, 0.15);
         /* Glassy Translucency */
         --surface-solid: rgba(255, 255, 255, 0.8);
         --text: #1C1C1E;
         --text-secondary: #8E8E93;
         --border: rgba(255, 255, 255, 0.2);
         --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

         /* Card & UI Props */
         --card-radius: 20px;
         --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         --backdrop-blur: blur(20px);
         --size: 80%;
         /* For gradients */

         /* Spacing System */
         --space-xs: 0.5rem;
         --space-sm: 1rem;
         --space-md: 1.5rem;
         --space-lg: 2rem;
         --space-xl: 3rem;

         /* Typography - Fluid Sizing (Optimized for all devices) */
         --text-xs: clamp(0.7rem, 0.6rem + 0.1vw, 0.75rem);
         --text-sm: clamp(0.8rem, 0.75rem + 0.15vw, 0.85rem);
         --text-base: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
         --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
         --text-xl: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
         --text-2xl: clamp(1.4rem, 1.3rem + 0.8vw, 1.6rem);
         --text-3xl: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
         --text-4xl: clamp(2.2rem, 1.8rem + 3.5vw, 4.5rem);

         /* Enhanced RGB Colors & Gradients */
         --gradient-background-start: rgb(108, 0, 162);
         --gradient-background-end: rgb(0, 17, 130);
         --accent-1: #FF6B6B;
         --accent-2: #4ECDC4;
         --accent-3: #FFD166;
         --accent-4: #6A0572;
         --accent-5: #06D6A0;
         --accent-6: #118AB2;
         --accent-7: #EF476F;
         --accent-8: #073B4C;
         --accent-9: #7209B7;
         --accent-10: #3A86FF;

         /* Semantic Colors */
         --success: #0D8B68;
         --warning: #E6B400;
         --error: #C53030;
         --info: #2B6CB0;

         /* Z-index scale */
         --z-dropdown: 1000;
         --z-sticky: 1020;
         --z-fixed: 1030;
         --z-modal-backdrop: 1040;
         --z-modal: 1050;
         --z-popover: 1060;
         --z-tooltip: 1070;
         --z-toast: 1080;
         --z-loading: 1090;
         --z-skip-link: 1100;

         /* Animation speeds */
         --transition-fast: 0.2s;
         --transition-medium: 0.4s;
         --transition-slow: 0.6s;
     }

     /* Dark Theme (AMOLED) */
     .dark-theme {
         --primary: #0A84FF;
         --primary-dark: #0066CC;
         --background: #000000;
         --surface: rgba(28, 28, 30, 0.15);
         --surface-solid: rgba(28, 28, 30, 0.8);
         --text: #FFFFFF;
         --text-secondary: #98989D;
         --border: rgba(255, 255, 255, 0.1);
         --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     }

     /* Base HTML and Body Styles */
     html {
         scroll-behavior: smooth;
         scroll-padding-top: 80px;
         font-size: 16px;
     }

     body {
         font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         background-color: transparent;
         /* Changed to transparant to show animated-bg */
         color: var(--text);
         line-height: 1.6;
         overflow-x: hidden;
         transition: background-color 0.3s ease, color 0.3s ease;
         position: relative;
         min-height: 100vh;
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         /* Safe area insets for notch devices */
         padding-left: env(safe-area-inset-left);
         padding-right: env(safe-area-inset-right);
     }

     a {
         text-decoration: none;
         color: inherit;
     }

     ul,
     ol {
         list-style: none;
     }

     /* Enhanced Focus Management */
     :focus {
         outline: 2px solid var(--primary);
         outline-offset: 3px;
     }

     :focus:not(:focus-visible) {
         outline: none;
     }

     :focus-visible {
         outline: 3px solid var(--primary);
         outline-offset: 3px;
     }

     button:focus-visible,
     a:focus-visible,
     input:focus-visible,
     textarea:focus-visible,
     select:focus-visible {
         outline: 3px solid var(--primary);
         outline-offset: 2px;
     }

     /* Skip to main content link */
     .skip-link {
         position: absolute;
         top: -50px;
         left: 10px;
         background: var(--primary);
         color: white;
         padding: 12px 16px;
         border-radius: 6px;
         text-decoration: none;
         z-index: var(--z-skip-link);
         font-weight: 600;
         transition: top 0.3s ease;
     }

     .skip-link:focus {
         top: 10px;
     }

     .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0;
     }

     /* PERFECT ANIMATED BACKGROUND SYSTEM */
     .animated-bg {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: var(--background);
         /* Added base background color here */
         z-index: -2;
         overflow: hidden;
         pointer-events: none;
     }

     .gradient-bg {
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg,
                 rgba(108, 0, 162, 0.1) 0%,
                 rgba(0, 17, 130, 0.1) 50%,
                 rgba(214, 69, 80, 0.05) 100%);
         background-size: 200% 200%;
         animation: gradientShift 20s ease infinite;
     }

     @keyframes gradientShift {

         0%,
         100% {
             background-position: 0% 50%;
         }

         50% {
             background-position: 100% 50%;
         }
     }

     .gradients-container {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         filter: blur(60px);
         opacity: 0.7;
     }

     .gradient {
         position: absolute;
         border-radius: 50%;
         mix-blend-mode: screen;
         width: var(--size);
         height: var(--size);
         top: calc(50% - var(--size) / 2);
         left: calc(50% - var(--size) / 2);
         will-change: transform, opacity;
     }

     .gradient-1 {
         --size: 60%;
         background: radial-gradient(circle at center,
                 rgba(18, 113, 255, 0.9) 0%,
                 rgba(18, 113, 255, 0.4) 30%,
                 transparent 70%);
         animation: float-1 25s infinite alternate ease-in-out;
     }

     .gradient-2 {
         --size: 50%;
         background: radial-gradient(circle at center,
                 rgba(221, 74, 255, 0.8) 0%,
                 rgba(221, 74, 255, 0.3) 40%,
                 transparent 70%);
         transform-origin: calc(50% - 200px);
         animation: float-2 20s infinite alternate-reverse ease-in-out;
     }

     .gradient-3 {
         --size: 65%;
         background: radial-gradient(circle at center,
                 rgba(100, 220, 255, 0.7) 0%,
                 rgba(100, 220, 255, 0.2) 50%,
                 transparent 80%);
         transform-origin: calc(50% + 300px);
         animation: float-3 30s infinite alternate ease-in-out;
     }

     .gradient-4 {
         --size: 40%;
         background: radial-gradient(circle at center,
                 rgba(200, 50, 50, 0.6) 0%,
                 rgba(200, 50, 50, 0.1) 60%,
                 transparent 90%);
         transform-origin: calc(50% - 150px);
         animation: float-4 18s infinite alternate-reverse ease-in-out;
         opacity: 0.5;
     }

     .gradient-5 {
         --size: 55%;
         background: radial-gradient(circle at center,
                 rgba(180, 180, 50, 0.5) 0%,
                 rgba(180, 180, 50, 0.1) 45%,
                 transparent 85%);
         transform-origin: calc(50% - 400px) calc(50% + 200px);
         animation: float-5 22s infinite alternate ease-in-out;
     }

     @keyframes float-1 {
         0% {
             transform: translate(0%, 0%) scale(1);
             opacity: 0.8;
         }

         25% {
             transform: translate(-8%, -5%) scale(1.05);
             opacity: 0.9;
         }

         50% {
             transform: translate(5%, 8%) scale(0.95);
             opacity: 0.7;
         }

         75% {
             transform: translate(-2%, 10%) scale(1.02);
             opacity: 0.85;
         }

         100% {
             transform: translate(10%, -8%) scale(1);
             opacity: 0.8;
         }
     }

     @keyframes float-2 {
         0% {
             transform: rotate(0deg) scale(1);
         }

         33% {
             transform: rotate(90deg) scale(1.1);
         }

         66% {
             transform: rotate(180deg) scale(0.9);
         }

         100% {
             transform: rotate(270deg) scale(1);
         }
     }

     @keyframes float-3 {

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

         25% {
             transform: scale(1.2) translate(-20px, 15px);
         }

         50% {
             transform: scale(0.8) translate(15px, -25px);
         }

         75% {
             transform: scale(1.05) translate(-15px, -20px);
         }
     }

     @keyframes float-4 {
         0% {
             transform: translateX(0) skew(0deg);
         }

         50% {
             transform: translateX(60px) skew(5deg);
         }

         100% {
             transform: translateX(-40px) skew(-3deg);
         }
     }

     @keyframes float-5 {
         0% {
             transform: translate(0, 0) rotate(0deg);
         }

         25% {
             transform: translate(30px, 25px) rotate(45deg);
         }

         50% {
             transform: translate(-15px, 40px) rotate(90deg);
         }

         75% {
             transform: translate(40px, -20px) rotate(135deg);
         }

         100% {
             transform: translate(-25px, -30px) rotate(180deg);
         }
     }

     .particles {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
     }

     .particle {
         position: absolute;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 50%;
         animation: particle-float 20s infinite linear;
         will-change: transform, opacity;
     }

     @keyframes particle-float {
         0% {
             transform: translateY(100vh) translateX(0) scale(0);
             opacity: 0;
         }

         10% {
             opacity: 0.3;
         }

         90% {
             opacity: 0.1;
         }

         100% {
             transform: translateY(-50px) translateX(50px) scale(1);
             opacity: 0;
         }
     }

     /* Premium Cursor Styles */
     @media (min-width: 1025px) {
         body {
             cursor: auto;
         }
     }

     .cursor-dot {
         position: fixed;
         top: 0;
         left: 0;
         width: 8px;
         height: 8px;
         background-color: var(--primary);
         border-radius: 50%;
         pointer-events: none;
         z-index: 9999;
         transform: translate(-50%, -50%);
         box-shadow: 0 0 10px var(--primary);
         mix-blend-mode: exclusion;
     }

     /* Ensure cursor-dot class exists */
     .cursor-dot {
         display: block !important;
     }

     .cursor-outline {
         position: fixed;
         top: 0;
         left: 0;
         width: 40px;
         height: 40px;
         border: 1.5px solid var(--primary);
         /* Matched primary color */
         border-radius: 50%;
         pointer-events: none;
         z-index: 9998;
         transform: translate(-50%, -50%);
         transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
         mix-blend-mode: exclusion;
     }

     body.hovering .cursor-outline {
         width: 60px;
         height: 60px;
         background-color: rgba(255, 255, 255, 0.05);
         border-color: transparent;
     }

     /* Text Select Mode */
     body.text-mode .cursor-outline {
         width: 4px;
         height: 40px;
         border-radius: 4px;
         background-color: var(--primary);
         border: none;
     }

     body.text-mode .cursor-dot {
         opacity: 0 !important;
     }

     /* Input Mode */
     body.input-mode .cursor-outline {
         width: 20px;
         height: 20px;
         border-radius: 4px;
         /* Square for precision */
         background-color: transparent;
         border: 2px solid var(--primary);
         transform: translate(-50%, -50%) rotate(45deg);
     }

     /* Hide on touch devices */
     @media (hover: none) and (pointer: coarse) {

         .cursor-dot,
         .cursor-outline {
             display: none !important;
         }

         body {
             cursor: auto;
         }
     }

     /* Cursor Star Trail */
     .cursor-trail {
         position: absolute;
         width: 4px;
         height: 4px;
         background: white;
         border-radius: 50%;
         pointer-events: none;
         animation: trail-fade 1s linear forwards;
         box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
         z-index: 9999;
     }

     @keyframes trail-fade {
         0% {
             transform: scale(1);
             opacity: 1;
         }

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

     /* Dynamic Background Gradient */
     .animated-background::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                 rgba(0, 122, 255, 0.15),
                 transparent 40%);
         pointer-events: none;
         z-index: 0;
         transition: background 0.2s ease;
     }

     .falling-stars {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
         z-index: -1;
     }

     .star {
         position: absolute;
         width: 2px;
         height: 2px;
         background: white;
         border-radius: 50%;
         animation: star-fall linear infinite, star-pulse 1.5s ease-in-out infinite alternate;
         opacity: 0;
         box-shadow:
             0 0 15px rgba(255, 255, 255, 0.9),
             0 0 25px var(--primary);
         filter: drop-shadow(0 0 5px white);
         will-change: transform, opacity;
     }

     @keyframes star-pulse {
         0% {
             transform: scale(1);
             opacity: 0.8;
         }

         100% {
             transform: scale(1.2);
             opacity: 1;
         }
     }

     .star::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 1px;
         height: 20px;
         background: linear-gradient(to bottom, white, transparent);
         transform: translateY(-100%);
     }

     @keyframes star-fall {
         0% {
             transform: translateY(-100px) translateX(0);
             opacity: 0;
         }

         10% {
             opacity: 1;
         }

         90% {
             opacity: 1;
         }

         100% {
             transform: translateY(100vh) translateX(100px);
             opacity: 0;
         }
     }

     .spotlight {
         position: absolute;
         border-radius: 50%;
         background: radial-gradient(circle,
                 rgba(255, 255, 255, 0.1) 0%,
                 transparent 70%);
         pointer-events: none;
         filter: blur(40px);
     }

     .spotlight-1 {
         width: 400px;
         height: 400px;
         top: 20%;
         left: 10%;
         animation: spotlight-move-1 25s infinite alternate ease-in-out;
     }

     .spotlight-2 {
         width: 320px;
         height: 320px;
         top: 60%;
         right: 15%;
         animation: spotlight-move-2 20s infinite alternate-reverse ease-in-out;
     }

     .spotlight-3 {
         width: 240px;
         height: 240px;
         bottom: 20%;
         left: 20%;
         animation: spotlight-move-3 30s infinite alternate ease-in-out;
     }

     @keyframes spotlight-move-1 {
         0% {
             transform: translate(0, 0) scale(1);
         }

         50% {
             transform: translate(80px, 40px) scale(1.1);
         }

         100% {
             transform: translate(-60px, -30px) scale(0.9);
         }
     }

     @keyframes spotlight-move-2 {
         0% {
             transform: translate(0, 0) scale(1);
         }

         50% {
             transform: translate(-70px, 50px) scale(1.15);
         }

         100% {
             transform: translate(65px, -40px) scale(0.85);
         }
     }

     @keyframes spotlight-move-3 {
         0% {
             transform: translate(0, 0) scale(1);
         }

         33% {
             transform: translate(50px, -25px) scale(1.05);
         }

         66% {
             transform: translate(-30px, 55px) scale(0.95);
         }

         100% {
             transform: translate(40px, 30px) scale(1.1);
         }
     }

     .grid-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image:
             linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
         background-size: 50px 50px;
         opacity: 0.4;
         animation: grid-pulse 8s infinite alternate;
     }

     @keyframes grid-pulse {
         0% {
             opacity: 0.2;
         }

         100% {
             opacity: 0.5;
         }
     }

     /* Enhanced PORTFOLIO COMPONENTS with Better Visibility */
     .glass-card {
         will-change: transform, opacity;
         background: var(--surface);
         backdrop-filter: var(--backdrop-blur);
         -webkit-backdrop-filter: var(--backdrop-blur);
         border: 1px solid var(--border);
         border-radius: var(--card-radius);
         box-shadow: var(--shadow);
         transition: var(--transition);
         position: relative;
         overflow: hidden;
         padding: var(--space-xl);
         margin: var(--space-md) 0;
         gap: var(--space-lg);
         contain: layout style paint;
     }

     .glass-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
         z-index: -1;
     }

     .glass-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     }

     .glass-card:focus-within {
         outline: 2px solid var(--primary);
         outline-offset: 4px;
     }

     /* Enhanced Header with Better Mobile Navigation */
     header {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: var(--z-fixed);
         display: flex;
         justify-content: center;
         padding: 15px 20px;
         transition: var(--transition);
         background: transparent;
         backdrop-filter: none;
     }

     header.scrolled {
         background: var(--surface);
         backdrop-filter: var(--backdrop-blur);
         -webkit-backdrop-filter: var(--backdrop-blur);
         padding: 10px 20px;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     }

     .nav-container {
         position: relative;
         display: flex;
         padding: 5px;
         border-radius: 50px;
         align-items: center;
         gap: 5px;
         background: rgba(255, 255, 255, 0.03);
         /* Ultra-thin premium glass */
         backdrop-filter: blur(25px) saturate(180%);
         -webkit-backdrop-filter: blur(25px) saturate(180%);
         border: 1px solid rgba(255, 255, 255, 0.08);
         box-shadow:
             0 10px 40px -10px rgba(0, 0, 0, 0.3),
             inset 0 0 0 1px rgba(255, 255, 255, 0.05);
         transition: all 0.4s ease;
     }

     .nav-container:hover {
         border-color: rgba(255, 255, 255, 0.15);
         box-shadow:
             0 15px 50px -10px rgba(0, 0, 0, 0.4),
             inset 0 0 0 1px rgba(255, 255, 255, 0.1);
     }

     .nav-indicator {
         position: absolute;
         height: calc(100% - 10px);
         background: linear-gradient(90deg, #00C6FF, #0072FF);
         /* Neon Cyan to Blue */
         border-radius: 40px;
         z-index: 0;
         transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
         width: 0;
         opacity: 0;
         left: 0;
         box-shadow: 0 0 20px rgba(0, 114, 255, 0.5);
         /* Neon glow */
     }

     .nav-link {
         position: relative;
         color: var(--text);
         /* Default text color */
         font-size: 0.9rem;
         font-weight: 500;
         padding: 10px 24px;
         /* Increased padding for elegance */
         border-radius: 40px;
         z-index: 1;
         transition: color 0.3s ease, letter-spacing 0.3s ease;
         text-decoration: none;
         opacity: 0.8;
         white-space: nowrap;
     }

     .nav-link:hover {
         color: white;
         opacity: 1;
         text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
     }

     .nav-link.active {
         color: white;
         opacity: 1;
         font-weight: 600;
         text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
     }

     /* Enhanced Logo Style */
     .port {
         filter: drop-shadow(0 0 8px rgba(0, 122, 255, 0.3));
         transition: filter 0.3s ease;
     }

     .port:hover {
         filter: drop-shadow(0 0 12px rgba(0, 122, 255, 0.6));
     }

     .port {
         font-family: "Bungee Shade", sans-serif;
         font-size: 1.5rem;
         color: var(--primary);
         padding: 0 20px;
         z-index: 1;
         text-decoration: none;
     }

     /* Remove old underline effect */
     .nav-link::after {
         display: none;
     }

     @media (max-width: 768px) {
         .nav-indicator {
             display: none;
         }

         .nav-container {
             border-radius: 20px;
             padding: 10px;
             background: var(--surface-solid);
         }

         .nav-link.active {
             color: var(--primary);
             background: rgba(0, 122, 255, 0.1);
         }
     }

     .theme-toggle {
         background: none;
         border: none;
         color: var(--text);
         font-size: 1rem;
         cursor: pointer;
         transition: var(--transition);
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-left: 8px;
     }

     .theme-toggle:hover,
     .theme-toggle:focus {
         background: rgba(0, 102, 204, 0.1);
         transform: scale(1.1);
     }

     /* Enhanced Hero Section with Better Typography */
     .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         padding: 100px 20px 40px;
     }

     .hero-content {
         max-width: 900px;
         text-align: center;
         z-index: 1;
     }

     .hero-title-fade-in {
         will-change: transform, opacity;
         font-family: "Zen Dots", sans-serif;
         font-weight: 400;
         font-size: var(--text-4xl);
         margin-bottom: 20px;
         animation: fadeIn 2s ease forwards;
         color: var(--text);
         line-height: 1.1;
         overflow-wrap: break-word;
         word-break: break-word;
     }

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

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

     .hero-subtitle {
         text-transform: uppercase;
         letter-spacing: 2px;
         font-size: clamp(1.5rem, 4vw, 2.1rem);
         color: var(--primary);
         margin-bottom: 25px;
         font-weight: 400;
         font-family: "Monoton", sans-serif;
         color: var(--text-secondary);
         line-height: 1.4;
     }

     .hero-description {
         font-family: "Saira Stencil One", sans-serif;
         font-weight: 400;
         font-size: clamp(1.2rem, 3vw, 1.5rem);
         margin-bottom: 40px;
         max-width: 700px;
         margin-left: auto;
         margin-right: auto;
         line-height: 1.6;
         text-align: center;
         color: var(--text);
     }

     /* Enhanced Profile Image with Better Focus */
     .profile-container {
         position: relative;
         margin: 40px auto;
         width: min(380px, 90vw);
         height: min(380px, 90vw);
         border-radius: 20px;
         /* Changed from 50% to square with rounded corners */
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
         background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
         box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
     }

     .profile-container::before {
         content: '';
         position: absolute;
         inset: -5px;
         border-radius: 20px;
         /* Changed from 50% to match container */
         background: linear-gradient(45deg, #00c6ff, #0072ff, #ff007f, #ffcc00);
         background-size: 300% 300%;
         animation: borderFlow 6s ease infinite;
         z-index: 0;
         filter: blur(10px);
     }

     .profile-img {
         position: relative;
         width: 95%;
         height: 95%;
         border-radius: 50%;
         object-fit: cover;
         border: 4px solid rgba(255, 255, 255, 0.2);
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
         z-index: 2;
         animation: zoomInOut 6s ease-in-out infinite;
         transition: transform 0.4s ease, box-shadow 0.4s ease;
     }

     .profile-img:hover {
         transform: scale(1.08);
         box-shadow: 0 20px 40px rgba(0, 255, 200, 0.3);
     }

     @keyframes zoomInOut {

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

         50% {
             transform: scale(1.05);
         }
     }

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

         50% {
             background-position: 100% 50%;
         }

         100% {
             background-position: 0% 50%;
         }
     }

     /* Enhanced Hero Buttons with Better States */
     .hero-buttons {
         display: flex;
         gap: 20px;
         justify-content: center;
         align-items: center;
         flex-wrap: wrap;
         margin-top: 40px;
     }

     .hero-btn {
         position: relative;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         height: 56px;
         min-width: 160px;
         padding: 0 35px;
         border-radius: 50px;
         font-weight: 700;
         font-size: 16px;
         text-transform: uppercase;
         letter-spacing: 1px;
         text-decoration: none;
         transition: all 0.4s ease;
         box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
         overflow: hidden;
         z-index: 1;
         color: white;
         border: none;
         cursor: pointer;
     }

     .hero-btn::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(45deg, #007AFF, #00D4FF, #0099FF);
         background-size: 400% 400%;
         animation: gradient-shift 3s ease infinite;
         border-radius: 50px;
         z-index: -1;
     }

     .hero-btn.primary::before {
         background: linear-gradient(45deg, #FF6B6B, #FF8E53, #FF4757);
         box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
     }

     .hero-btn span {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         position: relative;
         z-index: 2;
     }

     .hero-btn:hover,
     .hero-btn:focus {
         transform: translateY(-5px) scale(1.05);
         box-shadow: 0 15px 35px rgba(0, 122, 255, 0.6);
     }

     .hero-btn.primary:hover,
     .hero-btn.primary:focus {
         box-shadow: 0 15px 35px rgba(255, 107, 107, 0.6);
     }

     .hero-btn:active {
         transform: translateY(-2px) scale(1.02);
     }

     @keyframes gradient-shift {
         0% {
             background-position: 0% 50%;
         }

         50% {
             background-position: 100% 50%;
         }

         100% {
             background-position: 0% 50%;
         }
     }

     /* Enhanced Section Styles */
     section {
         padding: 80px 20px;
         position: relative;
         scroll-margin-top: 80px;
     }

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

     .section-title {
         will-change: transform, opacity;
         font-size: var(--text-3xl);
         text-align: center;
         margin-bottom: clamp(30px, 5vw, 60px);
         font-weight: 700;
         color: var(--text);
         overflow-wrap: break-word;
         word-break: break-word;
     }

     /* Enhanced Text Gradient */
     .text-gradient {
         background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     /* Enhanced Breadcrumb Navigation */
     .breadcrumb {
         display: flex;
         align-items: center;
         gap: var(--space-sm);
         margin-bottom: var(--space-lg);
         font-size: var(--text-sm);
         color: var(--text-secondary);
         flex-wrap: wrap;
     }

     .breadcrumb a {
         transition: var(--transition);
         padding: var(--space-xs) var(--space-sm);
         border-radius: 6px;
     }

     .breadcrumb a:hover,
     .breadcrumb a:focus {
         color: var(--primary);
         background: rgba(0, 102, 204, 0.1);
     }

     .breadcrumb .current {
         color: var(--text);
         font-weight: 600;
     }

     .breadcrumb-separator {
         margin: 0 var(--space-xs);
         color: var(--text-secondary);
     }

     /* Enhanced Sticky Section Navigation */
     .section-nav {
         position: fixed;
         right: var(--space-lg);
         top: 50%;
         transform: translateY(-50%);
         z-index: var(--z-sticky);
         display: flex;
         flex-direction: column;
         gap: var(--space-md);
     }

     .section-dot {
         width: 14px;
         height: 14px;
         border-radius: 50%;
         background: var(--text-secondary);
         cursor: pointer;
         transition: var(--transition);
         position: relative;
         border: 2px solid transparent;
     }

     .section-dot.active {
         background: var(--primary);
         transform: scale(1.3);
         border-color: var(--primary-light);
     }

     .section-dot:hover {
         transform: scale(1.2);
         background: var(--primary-light);
     }

     .section-dot:focus {
         outline: 2px solid var(--primary);
         outline-offset: 2px;
     }

     .section-dot::before {
         content: attr(data-label);
         position: absolute;
         right: 35px;
         top: 50%;
         transform: translateY(-50%) translateX(10px);
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
         color: var(--text);
         padding: 5px 12px;
         border-radius: 20px;
         font-size: 12px;
         font-weight: 500;
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
         pointer-events: none;
         white-space: nowrap;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .section-dot:hover::before {
         opacity: 1;
         visibility: visible;
         transform: translateY(-50%) translateX(0);
     }

     .section-dot:hover::before,
     .section-dot:focus::before {
         opacity: 1;
     }

     /* Enhanced Scroll Indicator */
     .scroll-indicator {
         position: fixed;
         top: 0;
         left: 0;
         height: 4px;
         background: linear-gradient(90deg, var(--primary), var(--accent-2));
         z-index: var(--z-fixed);
         width: 0%;
         transition: width 0.3s ease;
     }

     /* Enhanced Back to Top Button */
     .back-to-top {
         position: fixed;
         bottom: var(--space-lg);
         right: var(--space-lg);
         width: 50px;
         height: 50px;
         background: var(--primary);
         color: white;
         border: none;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         opacity: 0;
         visibility: hidden;
         transition: var(--transition);
         z-index: var(--z-fixed);
         box-shadow: var(--shadow);
         will-change: transform, opacity;
     }

     .back-to-top.visible {
         opacity: 1;
         visibility: visible;
     }

     .back-to-top:hover,
     .back-to-top:focus {
         transform: translateY(-5px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
         background: var(--primary-dark);
     }

     /* Enhanced Skills Carousel with Better Accessibility */
     .skills-carousel {
         margin: var(--space-xl) 0;
         overflow: hidden;
         position: relative;
         padding: var(--space-md) 0;
     }

     .skills-track {
         display: flex;
         gap: var(--space-xl);
         animation: scroll-skills 30s linear infinite;
         padding: var(--space-sm) 0;

     }

     .skill-item {
         display: flex;
         align-items: center;
         gap: var(--space-sm);
         padding: var(--space-sm) var(--space-md);
         background: var(--surface);
         border-radius: 50px;
         white-space: nowrap;
         border: 1px solid var(--border);
         transition: var(--transition);
         min-height: 44px;
     }

     .skill-item:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     @keyframes scroll-skills {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(-50%);
         }
     }

     /* Enhanced Typography */
     .modern-heading {
         font-family: 'Orbitron', sans-serif;
         font-weight: 700;
         letter-spacing: 1px;
     }

     .elegant-text {
         font-family: 'Poppins', sans-serif;
         font-weight: 300;
         line-height: 1.8;
     }

     /* Enhanced Interactive Elements */
     .interactive-card {
         position: relative;
         overflow: hidden;
     }

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

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

     /* Enhanced About Grid */
     .about-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 20px;
     }

     .grid-item {
         padding: 25px;
         border-radius: 20px;
         min-height: 240px;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         position: relative;
         overflow: hidden;
         transition: var(--transition);
         border: 1px solid var(--border);
     }

     .grid-item-large {
         grid-column: span 2;
     }

     .grid-item h3 {
         font-size: 1.3rem;
         margin-bottom: 12px;
         font-weight: 700;
         color: var(--text);
     }

     .grid-item p {
         color: var(--text);
         line-height: 1.6;
         font-size: 15px;
     }

     /* Enhanced Skills Tags */
     .skills-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 15px;
     }

     .skill-tag {
         background: rgba(0, 102, 204, 0.1);
         padding: 8px 14px;
         border-radius: 20px;
         font-size: 13px;
         color: var(--primary);
         font-weight: 500;
         transition: var(--transition);
         cursor: pointer;
         border: 1px solid transparent;
         min-height: 36px;
         display: inline-flex;
         align-items: center;
     }

     .skill-tag:hover,
     .skill-tag:focus {
         background: var(--primary);
         color: white;
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0, 122, 255, 0.3);
         border-color: var(--primary);
     }

     /* Enhanced Skills Visualization */
     .skills-visualization {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: var(--space-lg);
         margin-top: var(--space-xl);
     }

     .skill-category {
         background: var(--surface);
         padding: var(--space-lg);
         border-radius: var(--card-radius);
         border: 1px solid var(--border);
         transition: var(--transition);
     }

     .skill-category:hover {
         transform: translateY(-3px);
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     }

     .skill-bar {
         height: 10px;
         background: var(--border);
         border-radius: 5px;
         margin: var(--space-sm) 0;
         overflow: hidden;
         position: relative;
     }

     .skill-progress {
         height: 100%;
         background: linear-gradient(90deg, var(--primary), var(--accent-2));
         border-radius: 5px;
         transition: width 1s ease-in-out;
         position: relative;
         overflow: hidden;
     }

     .skill-progress::after {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
         animation: progressShine 2s infinite;
     }

     @keyframes progressShine {
         0% {
             left: -100%;
         }

         100% {
             left: 100%;
         }
     }

     /* Enhanced Project Filter */
     .project-filters {
         display: flex;
         justify-content: center;
         gap: var(--space-sm);
         margin-bottom: var(--space-xl);
         flex-wrap: wrap;
     }

     .filter-btn {
         padding: var(--space-sm) var(--space-md);
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: 25px;
         color: var(--text);
         cursor: pointer;
         transition: var(--transition);
         font-weight: 500;
         min-height: 44px;
         display: inline-flex;
         align-items: center;
     }

     .filter-btn.active,
     .filter-btn:hover,
     .filter-btn:focus {
         background: var(--primary);
         color: white;
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0, 122, 255, 0.3);
     }

     /* Enhanced Projects Section */
     .projects-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
         gap: 25px;
     }

     .project-card {
         padding: 0;
         overflow: hidden;
         transition: all 0.4s ease;
         border: 1px solid var(--border);
     }

     .project-img {
         width: 100%;
         height: 200px;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .project-card:hover .project-img {
         transform: scale(1.05);
     }

     .project-content {
         padding: 20px;
     }

     .project-title {
         font-size: 1.2rem;
         margin-bottom: 10px;
         font-weight: 700;
         color: var(--text);
     }

     .project-desc {
         color: var(--text);
         margin-bottom: 15px;
         line-height: 1.6;
         font-size: 15px;
     }

     .project-tech {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-bottom: 15px;
     }

     .tech-tag {
         background: rgba(0, 122, 255, 0.1);
         color: var(--primary);
         padding: 5px 10px;
         border-radius: 15px;
         font-size: 0.75rem;
         font-weight: 500;
         transition: all 0.3s ease;
     }

     .tech-tag:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
     }

     .project-links {
         display: flex;
         gap: 12px;
     }

     /* Enhanced Experience Section */
     .experience-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 20px;
     }

     .experience-card {
         padding: 25px;
         position: relative;
         overflow: hidden;
         transition: all 0.4s ease;
         border: 1px solid var(--border);
     }

     .experience-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     }

     .experience-card h3 {
         font-size: var(--text-xl);
         margin-bottom: 8px;
         font-weight: 700;
         color: var(--text);
     }

     .experience-card .company {
         color: var(--primary);
         font-weight: 600;
         margin-bottom: 6px;
         font-size: 15px;
     }

     .experience-card .duration {
         color: var(--text-secondary);
         font-size: 0.85rem;
         margin-bottom: 12px;
     }

     .experience-card p {
         color: var(--text);
         line-height: 1.6;
         font-size: 15px;
     }

     /* Enhanced Interactive Map */
     .location-map {
         position: relative;
         height: 320px;
         border-radius: var(--card-radius);
         overflow: hidden;
         margin-top: var(--space-lg);
         box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border: 1px solid var(--border);
     }

     .location-map:hover {
         transform: translateY(-4px);
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     }

     .map-overlay {
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(0, 122, 255, 0.15), rgba(100, 220, 255, 0.15));
         display: flex;
         align-items: center;
         justify-content: center;
         pointer-events: none;
         backdrop-filter: blur(2px);
     }

     /* Enhanced Contact Section */
     .contact-container {
         display: grid;
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .contact-info {
         display: flex;
         flex-direction: column;
         gap: 15px;
     }

     .contact-item {
         display: flex;
         align-items: center;
         gap: 15px;
         padding: 20px;
         transition: var(--transition);
         cursor: pointer;
         animation: contactSlideIn 0.6s ease-out forwards;
         border-radius: var(--card-radius);
         border: 1px solid transparent;
     }

     .contact-item:hover,
     .contact-item:focus {
         transform: translateX(8px);
         background: var(--surface);
         border-color: var(--border);
     }

     @keyframes contactSlideIn {
         from {
             opacity: 0;
             transform: translateX(-30px);
         }

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

     .contact-item i {
         font-size: 1.3rem;
         color: var(--primary);
         width: 45px;
         height: 45px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(0, 122, 255, 0.1);
         border-radius: 50%;
         transition: var(--transition);
         animation: iconPulse 2s ease-in-out infinite;
     }

     @keyframes iconPulse {

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

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

     .contact-item:hover i,
     .contact-item:focus i {
         background: var(--primary);
         color: white;
         transform: scale(1.1);
         animation: none;
     }

     /* Contact Form Styles */
     .contact-form-container {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: var(--card-radius);
         padding: 2rem;
         margin-top: 2rem;
     }

     .form-group {
         margin-bottom: 1.5rem;
         position: relative;
     }

     .form-input,
     .form-textarea {
         width: 100%;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid var(--border);
         border-radius: 0.8rem;
         color: var(--text);
         font-family: inherit;
         transition: var(--transition);
         font-size: 16px;
         /* Prevent iOS zoom */
     }

     .form-input:focus,
     .form-textarea:focus {
         outline: none;
         border-color: var(--primary);
         background: rgba(255, 255, 255, 0.1);
         box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
     }

     .form-textarea {
         min-height: 150px;
         resize: vertical;
     }

     .form-error {
         color: var(--error);
         font-size: var(--text-sm);
         margin-top: var(--space-xs);
         display: flex;
         align-items: center;
         gap: var(--space-xs);
     }

     .form-success {
         color: var(--success);
         font-size: var(--text-sm);
         margin-top: var(--space-xs);
         display: flex;
         align-items: center;
         gap: var(--space-xs);
     }

     /* Enhanced Chat Widget */
     .chat-widget {
         position: fixed;
         bottom: var(--space-lg);
         right: var(--space-lg);
         width: 60px;
         height: 60px;
         background: var(--primary);
         color: white;
         border: none;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         box-shadow: var(--shadow);
         transition: var(--transition);
         z-index: var(--z-fixed);
         will-change: transform;
     }

     .chat-widget:hover,
     .chat-widget:focus {
         transform: scale(1.1);
         box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
     }

     .chat-box {
         position: fixed;
         bottom: 100px;
         right: var(--space-xl);
         width: 350px;
         background: var(--surface);
         border-radius: var(--card-radius);
         box-shadow: var(--shadow);
         z-index: var(--z-modal);
         opacity: 0;
         visibility: hidden;
         transform: translateY(20px);
         transition: var(--transition);
         border: 1px solid var(--border);
     }

     .chat-box.active {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .chat-header {
         padding: var(--space-md);
         border-bottom: 1px solid var(--border);
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: var(--surface-solid);
         border-radius: var(--card-radius) var(--card-radius) 0 0;
     }

     .chat-messages {
         height: 300px;
         overflow-y: auto;
         padding: var(--space-md);
         display: flex;
         flex-direction: column;
         gap: 0.8rem;
     }

     .message {
         max-width: 80%;
         padding: 0.8rem 1rem;
         border-radius: 1rem;
         font-size: 0.9rem;
         line-height: 1.4;
         position: relative;
         animation: messageIn 0.3s ease-out;
     }

     .user-message {
         background: var(--primary);
         color: white;
         align-self: flex-end;
         border-bottom-right-radius: 0.2rem;
     }

     .bot-message {
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid var(--border);
         color: var(--text);
         align-self: flex-start;
         border-bottom-left-radius: 0.2rem;
     }

     @keyframes messageIn {
         from {
             opacity: 0;
             transform: translateY(10px);
         }

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

     .chat-input {
         padding: var(--space-md);
         border-top: 1px solid var(--border);
         background: var(--surface-solid);
         border-radius: 0 0 var(--card-radius) var(--card-radius);
     }


     /* Chatbot Enhancements */
     .suggestion-chips {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin: 10px 0;
         padding: 0 5px;
     }

     .chat-chip {
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 20px;
         padding: 6px 12px;
         font-size: 0.85rem;
         color: var(--text-color);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .chat-chip:hover {
         background: var(--primary-color);
         border-color: var(--primary-color);
         color: #000;
     }

     .typing-indicator-container {
         padding: 10px !important;
     }

     .typing-indicator {
         display: flex;
         gap: 4px;
     }

     .typing-indicator span {
         width: 6px;
         height: 6px;
         background: var(--text-color);
         border-radius: 50%;
         animation: bounce 1.4s infinite ease-in-out;
         opacity: 0.6;
     }

     .typing-indicator span:nth-child(1) {
         animation-delay: -0.32s;
     }

     .typing-indicator span:nth-child(2) {
         animation-delay: -0.16s;
     }

     @keyframes bounce {

         0%,
         80%,
         100% {
             transform: scale(0);
         }

         40% {
             transform: scale(1);
         }
     }

     /* Markdown Styles in Chat */
     .message strong {
         color: var(--primary-color);
         font-weight: 600;
     }

     .message em {
         font-style: italic;
         opacity: 0.9;
     }

     .message pre {
         background: rgba(0, 0, 0, 0.3);
         padding: 8px;
         border-radius: 6px;
         overflow-x: auto;
         margin: 5px 0;
     }

     .message code {
         font-family: monospace;
         font-size: 0.9em;
         color: #ff9e64;
     }

     .message ul {
         margin-left: 20px;
         margin-bottom: 8px;
     }

     .message li {
         list-style-type: disc;
         margin-bottom: 4px;
     }

     /* Enhanced Footer */
     footer {
         padding: 50px 20px 25px;
         position: relative;
         background: var(--surface);
         backdrop-filter: var(--backdrop-blur);
         -webkit-backdrop-filter: var(--backdrop-blur);
         border-top: 1px solid var(--border);
     }

     .footer-content {
         display: grid;
         grid-template-columns: 1fr;
         gap: 35px;
         margin-bottom: 35px;
     }

     .footer-logo {
         font-size: 1.4rem;
         font-weight: 700;
         color: var(--primary);
         margin-bottom: 15px;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .footer-about p {
         color: var(--text);
         line-height: 1.6;
         margin-bottom: 15px;
         font-size: 15px;
     }

     .footer-links h3,
     .footer-social h3 {
         font-size: 1.2rem;
         margin-bottom: 20px;
         font-weight: 700;
         color: var(--text);
     }

     .footer-links ul li {
         margin-bottom: 10px;
     }

     .footer-links ul li a {
         color: var(--text);
         transition: var(--transition);
         font-size: 15px;
         padding: 4px 0;
         display: inline-block;
     }

     .footer-links ul li a:hover,
     .footer-links ul li a:focus {
         color: var(--primary);
         padding-left: 5px;
     }

     .social-icons {
         display: flex;
         gap: 12px;
     }

     .social-icons a {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 40px;
         height: 40px;
         background: rgba(0, 122, 255, 0.1);
         color: var(--primary);
         border-radius: 50%;
         transition: var(--transition);
         cursor: pointer;
     }

     .social-icons a:hover,
     .social-icons a:focus {
         background: var(--primary);
         color: white;
         transform: translateY(-5px);
     }

     .copyright {
         text-align: center;
         padding-top: 25px;
         border-top: 1px solid var(--border);
         color: var(--text);
         font-size: 14px;
     }

     /* Enhanced Newsletter Signup */
     .newsletter {
         background: var(--surface);
         padding: var(--space-xl);
         border-radius: var(--card-radius);
         margin-top: var(--space-xl);
         text-align: center;
         border: 1px solid var(--border);
     }

     .newsletter-form {
         display: flex;
         gap: var(--space-sm);
         max-width: 400px;
         margin: var(--space-md) auto;
     }

     .newsletter-input {
         flex: 1;
         padding: var(--space-sm) var(--space-md);
         background: var(--background);
         border: 1px solid var(--border);
         border-radius: 8px;
         color: var(--text);
         font-family: inherit;
         font-size: 16px;
         /* Prevent iOS zoom */
     }

     .newsletter-input:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
     }

     /* Enhanced Services Section */
     .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 25px;
     }

     .service-card {
         padding: 30px;
         text-align: center;
         transition: all 0.4s ease;
         border: 1px solid var(--border);
     }

     .service-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     }

     .service-card i {
         font-size: 2.5rem;
         color: var(--primary);
         margin-bottom: 20px;
     }

     .service-card h3 {
         font-size: var(--text-xl);
         margin-bottom: 15px;
         font-weight: 700;
         color: var(--text);
     }

     .service-card p {
         color: var(--text);
         line-height: 1.6;
         font-size: 15px;
     }

     /* Enhanced Testimonials Section */
     .testimonials {
         margin-top: 40px;
     }

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

     .testimonial-card {
         padding: 25px;
         border: 1px solid var(--border);
     }

     .testimonial-text {
         font-style: italic;
         margin-bottom: 20px;
         color: var(--text);
         line-height: 1.6;
         font-size: 15px;
         position: relative;
     }

     .testimonial-text::before {
         content: '"';
         font-size: 3rem;
         color: var(--primary);
         position: absolute;
         top: -15px;
         left: -10px;
         opacity: 0.3;
     }

     .testimonial-author {
         display: flex;
         align-items: center;
         gap: 15px;
     }

     .author-avatar {
         width: 50px;
         height: 50px;
         border-radius: 10%;
         object-fit: cover;
         border: 2px solid var(--border);
     }

     .author-info h4 {
         font-size: var(--text-lg);
         margin-bottom: 5px;
         color: var(--text);
     }

     .author-info p {
         color: var(--text-secondary);
         font-size: 14px;
     }

     /* Enhanced Trust Badges */
     .trust-badges {
         display: flex;
         justify-content: center;
         gap: var(--space-xl);
         margin-top: var(--space-xl);
         flex-wrap: wrap;
     }

     .trust-badge {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: var(--space-sm);
     }

     .badge-icon {
         width: 60px;
         height: 60px;
         background: var(--surface);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         color: var(--primary);
         border: 1px solid var(--border);
         transition: var(--transition);
     }

     .trust-badge:hover .badge-icon {
         transform: scale(1.1);
         background: var(--primary);
         color: white;
     }

     /* Enhanced Portfolio Carousel */
     .portfolio-carousel {
         position: relative;
         overflow: hidden;
         border-radius: var(--card-radius);
         margin: 40px 0;
         border: 1px solid var(--border);
     }

     .swiper {
         width: 100%;
         height: 400px;
     }

     .swiper-slide {
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: var(--card-radius);
         overflow: hidden;
         position: relative;
     }

     .swiper-slide img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .swiper-slide:hover img {
         transform: scale(1.05);
     }

     .slide-content {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
         color: white;
         padding: 30px 20px 20px;
         transform: translateY(100%);
         transition: transform 0.4s ease;
     }

     .swiper-slide:hover .slide-content {
         transform: translateY(0);
     }

     .slide-content h3 {
         font-size: 1.4rem;
         margin-bottom: 10px;
     }

     .slide-content p {
         font-size: 0.9rem;
         margin-bottom: 15px;
         opacity: 0.9;
     }

     /* Swiper Fixes */
     .swiper-button-next,
     .swiper-button-prev {
         color: var(--primary) !important;
         background: rgba(255, 255, 255, 0.8);
         width: 40px !important;
         height: 40px !important;
         border-radius: 50%;
         backdrop-filter: blur(4px);
     }

     .swiper-button-next::after,
     .swiper-button-prev::after {
         font-size: 1.2rem !important;
         font-weight: bold;
     }

     /* Enhanced Blog Section */
     .blog-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: var(--space-lg);
     }

     .blog-card {
         background: var(--surface);
         border-radius: var(--card-radius);
         overflow: hidden;
         transition: var(--transition);
         border: 1px solid var(--border);
     }

     .blog-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     }

     .blog-image {
         width: 100%;
         height: 200px;
         object-fit: cover;
     }

     .blog-content {
         padding: var(--space-lg);
     }

     .blog-meta {
         display: flex;
         gap: var(--space-md);
         margin-bottom: var(--space-sm);
         font-size: var(--text-sm);
         color: var(--text-secondary);
     }

     /* Enhanced Playground Section */
     .playground {
         background: var(--surface);
         border-radius: var(--card-radius);
         padding: var(--space-xl);
         margin-top: var(--space-xl);
         border: 1px solid var(--border);
     }

     .code-editor {
         background: #1e1e1e;
         border-radius: 8px;
         overflow: hidden;
         margin-top: var(--space-lg);
         border: 1px solid #333;
     }

     .editor-header {
         background: #2d2d2d;
         padding: var(--space-sm);
         display: flex;
         align-items: center;
         gap: var(--space-sm);
         border-bottom: 1px solid #333;
     }

     .editor-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
     }

     .editor-dot.red {
         background: #ff5f56;
     }

     .editor-dot.yellow {
         background: #ffbd2e;
     }

     .editor-dot.green {
         background: #27ca3f;
     }

     .editor-content {
         padding: var(--space-lg);
         font-family: 'Courier New', monospace;
         color: #d4d4d4;
         line-height: 1.5;
     }

     /* Enhanced Case Study Modal */
     .case-study-modal {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.8);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: var(--z-modal);
         opacity: 0;
         visibility: hidden;
         transition: var(--transition);
         padding: 20px;
     }

     .case-study-modal.active {
         opacity: 1;
         visibility: visible;
     }

     .modal-content {
         background: var(--background);
         max-width: 900px;
         max-height: 90vh;
         overflow-y: auto;
         border-radius: var(--card-radius);
         padding: var(--space-xl);
         position: relative;
         border: 1px solid var(--border);
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     }

     .modal-close {
         position: absolute;
         top: var(--space-md);
         right: var(--space-md);
         background: none;
         border: none;
         color: var(--text);
         font-size: 1.5rem;
         cursor: pointer;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
     }

     .modal-close:hover,
     .modal-close:focus {
         background: rgba(0, 0, 0, 0.1);
         transform: scale(1.1);
     }

     /* Enhanced Loading Animation */
     .loading-screen {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: #000000;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 9999;
         transition: opacity 0.5s ease, visibility 0.5s ease;
     }

     .loader-container {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 30px;
         text-align: center;
     }

     /* Enhanced Portfolio Logo */
     .portfolio-logo {
         display: flex;
         align-items: center;
         gap: 15px;
         font-family: "Bungee Shade", sans-serif;
         font-size: 2.5rem;
         color: #00D4FF;
         margin-bottom: 20px;
     }

     .portfolio-logo i {
         font-size: 2.8rem;
         background: linear-gradient(135deg, #00D4FF 0%, #00FFE0 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     /* Enhanced Progress Bar Container */
     .progress-container {
         width: 300px;
         height: 8px;
         background: rgba(10, 10, 10, 0.95);
         border-radius: 10px;
         overflow: hidden;
         position: relative;
         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     }

     /* Enhanced Animated Progress Bar */
     .progress-bar {
         height: 100%;
         width: 0%;
         background: linear-gradient(90deg, #00D4FF, #00FF88, #FF00CC);
         background-size: 200% 100%;
         border-radius: 10px;
         transition: width 0.3s ease;
         animation: progress-shimmer 2s infinite linear;
         position: relative;
         overflow: hidden;
     }

     .progress-bar::after {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
         animation: progress-shine 1.5s infinite;
     }

     /* Enhanced Loading Percentage */
     .loading-percentage {
         font-family: 'Orbitron', sans-serif;
         font-size: 1.2rem;
         font-weight: 700;
         color: #FFFFFF;
         margin-top: 15px;
     }

     /* Enhanced Animations */
     @keyframes progress-shimmer {
         0% {
             background-position: 200% 0;
         }

         100% {
             background-position: -200% 0;
         }
     }

     @keyframes progress-shine {
         0% {
             left: -100%;
         }

         100% {
             left: 100%;
         }
     }

     /* Enhanced Animation utilities */
     .fade-in {
         opacity: 0;
         transform: translateY(30px);
         animation: fadeInUp 0.8s ease forwards;
     }

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

     .stagger-animation>* {
         opacity: 0;
         transform: translateY(30px);
         animation: fadeInUp 0.8s ease forwards;
     }

     .stagger-animation>*:nth-child(1) {
         animation-delay: 0.1s;
     }

     .stagger-animation>*:nth-child(2) {
         animation-delay: 0.2s;
     }

     .stagger-animation>*:nth-child(3) {
         animation-delay: 0.3s;
     }

     .stagger-animation>*:nth-child(4) {
         animation-delay: 0.4s;
     }

     .stagger-animation>*:nth-child(5) {
         animation-delay: 0.5s;
     }

     .dynamic-color {
         animation: color-change 10s infinite alternate;
     }

     @keyframes color-change {
         0% {
             color: var(--primary);
         }

         25% {
             color: var(--accent-1);
         }

         50% {
             color: var(--accent-2);
         }

         75% {
             color: var(--accent-3);
         }

         100% {
             color: var(--accent-4);
         }
     }

     .bouncing-text {
         animation: bounce 2s infinite;
         display: inline-block;
     }

     @keyframes bounce {

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

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

     .text-shimmer {
         background: linear-gradient(90deg,
                 var(--primary),
                 #ff007f,
                 #00e5ff,
                 #ffd500,
                 #9b5de5,
                 #f15bb5,
                 #00bbf9,
                 #00f5d4,
                 var(--accent-2),
                 var(--accent-3),
                 var(--primary));
         background-size: 500% 500%;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         animation: shimmer 4s ease-in-out infinite;
     }

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

         50% {
             background-position: 100% 50%;
         }

         100% {
             background-position: 0% 50%;
         }
     }

     .morph-shape {
         border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
         animation: morph 8s ease-in-out infinite;
     }

     @keyframes morph {
         0% {
             border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
         }

         50% {
             border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
         }

         100% {
             border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
         }
     }

     /* Enhanced Button Styles */
     .btn-3d {
         position: relative;
         transform-style: preserve-3d;
         transition: transform 0.3s ease;
     }

     .btn-3d:hover,
     .btn-3d:focus {
         transform: translateY(-5px) rotateX(10deg);
     }

     /* Enhanced Call-to-Action Buttons */
     .cta-button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: 15px 30px;
         background: var(--primary);
         color: white;
         border-radius: 50px;
         font-weight: 600;
         font-size: 16px;
         text-decoration: none;
         transition: all 0.4s ease;
         box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
         position: relative;
         overflow: hidden;
         cursor: pointer;
         border: none;
         min-height: 50px;
     }

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

     .cta-button:hover::before,
     .cta-button:focus::before {
         left: 100%;
     }

     .cta-button:hover,
     .cta-button:focus {
         transform: translateY(-3px);
         box-shadow: 0 12px 25px rgba(0, 122, 255, 0.4);
         background: var(--primary-dark);
     }

     .cta-button:active {
         transform: translateY(-1px);
     }

     /* Enhanced Mobile Navigation */
     .mobile-menu-toggle {
         display: none;
         background: none;
         border: none;
         color: var(--text);
         font-size: 1.5rem;
         cursor: pointer;
         z-index: var(--z-fixed);
         position: fixed;
         top: 20px;
         right: 20px;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         align-items: center;
         justify-content: center;
         background: var(--surface);
         backdrop-filter: var(--backdrop-blur);
         -webkit-backdrop-filter: var(--backdrop-blur);
         box-shadow: var(--shadow);
         transition: var(--transition);
         border: 1px solid var(--border);
     }

     .mobile-menu-toggle:hover,
     .mobile-menu-toggle:focus {
         background: rgba(0, 122, 255, 0.1);
         transform: scale(1.1);
     }

     .mobile-menu-toggle.active {
         background: var(--primary);
         color: white;
     }

     /* img container */
     .profile-container {
         position: relative;
         width: 100%;
         max-width: 400px;
         margin: 0 auto;
         perspective: 1000px;
         /* Enable 3D space */
         z-index: 10;
     }

     .image-carousel {
         position: relative;
         width: 100%;
         aspect-ratio: 1 / 1;
         overflow: hidden;
         border-radius: 20px;
         transform-style: preserve-3d;
         /* Crucial for 3D tilt */
         transition: transform 0.1s ease-out;
         /* Smooth movement */
         box-shadow:
             0 20px 50px rgba(0, 0, 0, 0.3),
             0 0 0 1px rgba(255, 255, 255, 0.1);
         /* Premium border */
     }

     /* Glare Effect */
     .image-carousel::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg,
                 rgba(255, 255, 255, 0.4) 0%,
                 rgba(255, 255, 255, 0) 50%,
                 rgba(255, 255, 255, 0) 100%);
         transform: translateY(100%);
         transition: transform 0.1s ease-out;
         pointer-events: none;
         z-index: 20;
         mix-blend-mode: overlay;
     }

     /* Floating Animation when idle */
     .profile-container:not(:hover) .image-carousel {
         animation: float-profile 6s ease-in-out infinite;
         transform: rotateX(0) rotateY(0) !important;
         /* Reset tilt */
     }

     @keyframes float-profile {

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

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

     .carousel-track {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 0;
         transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
         transform: translateX(100%);
     }

     .carousel-track.active {
         opacity: 1;
         transform: translateX(0);
     }

     .carousel-track.prev {
         transform: translateX(-100%);
     }

     .carousel-dots {
         position: absolute;
         bottom: 20px;
         left: 0;
         right: 0;
         display: flex;
         justify-content: center;
         gap: 10px;
         z-index: 10;
     }

     .carousel-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.5);
         border: 2px solid rgba(255, 255, 255, 0.8);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .carousel-dot.active {
         background: rgba(255, 255, 255, 0.9);
         transform: scale(1.2);
     }

     /* Fix for Google Maps Iframe */
     .embed-map-responsive {
         position: relative;
         width: 100%;
         padding-bottom: 56.25%;
         /* 16:9 Aspect Ratio */
         height: 0;
         overflow: hidden;
         border-radius: var(--card-radius);
     }

     .embed-map-frame {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: 0;
         filter: grayscale(100%) invert(90%);
         /* Dark mode map style approx */
     }

     /* Enhanced Scrollbar */
     ::-webkit-scrollbar {
         width: 8px;
     }

     ::-webkit-scrollbar-track {
         background: var(--background);
     }

     ::-webkit-scrollbar-thumb {
         background: var(--border);
         border-radius: 4px;
     }

     ::-webkit-scrollbar-thumb:hover {
         background: var(--primary);
     }

     /* Enhanced dark mode scrollbar */
     .dark-theme ::-webkit-scrollbar-thumb {
         background: var(--text-secondary);
     }

     .dark-theme ::-webkit-scrollbar-thumb:hover {
         background: var(--text);
     }

     /* Enhanced selection styles */
     ::selection {
         background: rgba(0, 102, 204, 0.3);
         color: inherit;
     }

     /* =========================================
           ENHANCED ROUTINE & LOADING STYLES
           ========================================= */

     /* Routine Section Enhancements */
     .routine-timeline {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 20px;
         margin-top: 30px;
     }

     .routine-item {
         position: relative;
         padding: 25px;
         display: flex;
         flex-direction: column;
         gap: 15px;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border-left: 4px solid var(--primary);
     }

     .routine-item:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     }

     .routine-time {
         position: absolute !important;
         top: 20px !important;
         right: 20px !important;
         background: rgba(0, 122, 255, 0.15);
         color: var(--primary);
         padding: 6px 14px;
         border-radius: 20px;
         font-weight: 600;
         font-size: 0.85rem;
         border: 1px solid rgba(0, 122, 255, 0.3);
         box-shadow: 0 2px 10px rgba(0, 122, 255, 0.1);
         z-index: 10;
     }

     .routine-icon {
         font-size: 2rem;
         color: var(--text);
         margin-bottom: 5px;
         opacity: 0.8;
     }

     .routine-item h3 {
         font-size: 1.2rem;
         margin: 0;
         color: var(--text);
     }

     .routine-item p {
         font-size: 0.95rem;
         color: var(--text-secondary);
         margin: 0;
         line-height: 1.5;
     }

     /* Loading Screen Enhancements */
     .portfolio-logo {
         animation: logo-pulse 2s infinite ease-in-out;
         position: relative;
     }

     .portfolio-logo::before {
         content: '';
         position: absolute;
         top: -20px;
         left: -20px;
         right: -20px;
         bottom: -20px;
         border: 2px solid transparent;
         border-top-color: var(--primary);
         border-bottom-color: var(--accent-1);
         border-radius: 50%;
         animation: spin-ring 3s linear infinite;
     }

     .portfolio-logo::after {
         content: '';
         position: absolute;
         top: -10px;
         left: -10px;
         right: -10px;
         bottom: -10px;
         border: 2px solid transparent;
         border-left-color: var(--accent-2);
         border-right-color: var(--accent-3);
         border-radius: 50%;
         animation: spin-ring-reverse 4s linear infinite;
     }

     @keyframes spin-ring {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     @keyframes spin-ring-reverse {
         0% {
             transform: rotate(360deg);
         }

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

     @keyframes logo-pulse {
         0% {
             transform: scale(1);
             filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
         }

         50% {
             transform: scale(1.05);
             filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
         }

         100% {
             transform: scale(1);
             filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
         }
     }

     .loading-percentage {
         position: relative;
         display: inline-block;
         font-size: 1.5rem;
         letter-spacing: 2px;
     }

     .loading-percentage::after {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
         animation: text-shimmer 2.5s infinite;
     }

     @keyframes text-shimmer {
         0% {
             left: -100%;
         }

         100% {
             left: 100%;
         }
     }

     ::-moz-selection {
         background: rgba(0, 102, 204, 0.3);
         color: inherit;
     }

     /* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

     /* Ultra-Small Mobile Devices (≤ 480px) */
     @media (max-width: 480px) {
         :root {
             --space-xl: 1.5rem;
             /* Reduce large spacing */
             --space-lg: 1.25rem;
             --card-radius: 16px;
             /* Smaller radius */
             --text-3xl: 1.75rem;
             /* Smaller headings */
             --text-4xl: 2rem;
         }

         /* Global adjustments */
         html {
             font-size: 14px;
             /* Slight scale down */
             scroll-padding-top: 60px;
         }

         body {
             padding-left: env(safe-area-inset-left);
             padding-right: env(safe-area-inset-right);
         }

         section {
             padding: 3rem 1rem;
             scroll-margin-top: 60px;
         }

         .container {
             padding: 0 0.5rem;
         }

         /* Header/Nav adjustments */
         header {
             padding: 10px 15px;
         }

         .nav-container {
             position: fixed;
             top: 0;
             right: -100%;
             width: 100%;
             height: 100vh;
             flex-direction: column;
             gap: 0;
             padding: 4rem 1.5rem 2rem;
             transition: right 0.3s ease;
             border-radius: 0;
             border-left: none;
             background: var(--surface-solid);
             z-index: var(--z-modal);
             max-width: 100%;
         }

         .nav-container.active {
             right: 0;
         }

         .mobile-menu-toggle {
             display: flex;
         }

         .nav-link {
             padding: 1rem;
             border-bottom: 1px solid var(--border);
             border-radius: 0;
             width: 100%;
             font-size: 1rem;
             text-align: center;
         }

         .port {
             font-size: 1.5rem;
             text-align: center;
             padding: 1rem;
             border-bottom: 1px solid var(--border);
             width: 100%;
         }

         .theme-toggle {
             position: absolute;
             top: 15px;
             right: 60px;
             background: var(--surface);
         }

         /* Hero section adjustments */
         .hero {
             padding: 4rem 1rem 2rem;
             min-height: calc(100vh - 60px);
         }

         .hero-title-fade-in {
             font-size: 1.5rem;
         }

         .hero-subtitle {
             font-size: 1.2rem;
             letter-spacing: 1px;
         }

         .hero-description {
             font-size: 1rem;
         }

         /* Card adjustments */
         .glass-card {
             padding: 1.25rem !important;
             /* Force smaller padding */
             border-radius: 16px;
         }

         /* Grid adjustments */
         .about-grid {
             grid-template-columns: 1fr;
             gap: 15px;
         }

         .grid-item-large {
             grid-column: span 1;
         }

         .projects-grid {
             grid-template-columns: 1fr;
             gap: 15px;
         }

         .services-grid {
             grid-template-columns: 1fr;
             gap: 15px;
         }

         .blog-grid {
             grid-template-columns: 1fr;
             gap: 15px;
         }

         .experience-grid {
             grid-template-columns: 1fr;
             gap: 15px;
         }

         /* Section title adjustments */
         .section-title {
             font-size: 1.5rem;
             margin-bottom: 30px;
         }

         /* Profile image adjustments */
         .profile-container {
             width: min(280px, 90vw);
             height: min(280px, 90vw);
         }

         /* Button adjustments */
         .hero-buttons {
             flex-direction: column;
             gap: 15px;
         }

         .hero-btn {
             min-width: 100%;
             height: 50px;
             padding: 0 25px;
         }

         .cta-button {
             width: 100%;
             padding: 12px 20px;
         }

         /* Contact section adjustments */
         .contact-container {
             grid-template-columns: 1fr;
             gap: 20px;
         }

         .contact-item {
             flex-direction: column;
             text-align: center;
             gap: 10px;
             padding: 15px;
         }

         .contact-form-container {
             padding: 1.5rem;
         }

         .form-input,
         .form-textarea {
             padding: 0.8rem;
             font-size: 16px;
             /* Prevent iOS zoom */
         }

         /* Footer adjustments */
         .footer-content {
             grid-template-columns: 1fr;
             gap: 25px;
         }

         .social-icons {
             justify-content: center;
         }

         /* Newsletter adjustments */
         .newsletter-form {
             flex-direction: column;
         }

         .newsletter-input,
         .newsletter-button {
             width: 100%;
         }

         /* Chat widget adjustments */
         .chat-box {
             width: calc(100% - 40px);
             right: 20px;
             bottom: 80px;
         }

         /* Section navigation adjustments */
         .section-nav {
             right: 10px;
             gap: 10px;
         }

         .section-dot {
             width: 10px;
             height: 10px;
         }

         /* Back to top adjustments */
         .back-to-top {
             bottom: 20px;
             right: 20px;
             width: 40px;
             height: 40px;
         }

         /* Swiper adjustments */
         .swiper {
             height: 300px;
         }

         .swiper-button-next,
         .swiper-button-prev {
             display: none !important;
         }

         /* Trust badges adjustments */
         .trust-badges {
             gap: 15px;
         }

         .trust-badge {
             min-width: 100px;
         }

         /* Loading screen adjustments */
         .progress-container {
             width: 250px;
         }

         .portfolio-logo {
             font-size: 1.8rem;
         }

         .loading-percentage {
             font-size: 1rem;
         }
     }

     /* Mobile & Small Tablets (481px - 768px) */
     @media (max-width: 768px) and (min-width: 481px) {
         html {
             scroll-padding-top: 70px;
         }

         section {
             scroll-margin-top: 70px;
             padding: 4rem 1.5rem;
         }

         /* Header/Nav adjustments */
         .nav-container {
             position: fixed;
             top: 0;
             right: -320px;
             width: 320px;
             height: 100vh;
             flex-direction: column;
             gap: 0;
             padding: 5rem 1.5rem 2rem;
             transition: right 0.3s ease;
             border-radius: 0;
             border-left: 1px solid var(--border);
             background: var(--surface-solid);
             z-index: var(--z-modal);
         }

         .nav-container.active {
             right: 0;
         }

         .mobile-menu-toggle {
             display: flex;
         }

         .nav-link {
             padding: 1rem;
             border-bottom: 1px solid var(--border);
             border-radius: 0;
             width: 100%;
             text-align: center;
         }

         .port {
             padding: 1rem;
             border-bottom: 1px solid var(--border);
             width: 100%;
             text-align: center;
         }

         .theme-toggle {
             position: absolute;
             top: 15px;
             right: 60px;
         }

         /* Hero section */
         .hero {
             padding: 5rem 1.5rem 2rem;
         }

         .hero-title-fade-in {
             font-size: clamp(1.8rem, 4vw, 2rem);
         }

         .hero-subtitle {
             font-size: clamp(1.3rem, 3vw, 1.8rem);
         }

         .hero-description {
             font-size: clamp(1.1rem, 2.5vw, 1.3rem);
         }

         /* Grid layouts */
         .about-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 20px;
         }

         .grid-item-large {
             grid-column: span 2;
         }

         .projects-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 20px;
         }

         .services-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 20px;
         }

         .blog-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 20px;
         }

         .experience-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 20px;
         }

         /* Footer */
         .footer-content {
             grid-template-columns: 1fr 1fr;
             gap: 30px;
         }

         /* Contact section */
         .contact-container {
             grid-template-columns: 1fr;
             gap: 30px;
         }

         /* Section title */
         .section-title {
             font-size: clamp(1.8rem, 3vw, 2rem);
         }

         /* Buttons */
         .hero-buttons {
             gap: 15px;
         }

         .hero-btn {
             min-width: 180px;
         }

         /* Profile image */
         .profile-container {
             width: min(320px, 70vw);
             height: min(320px, 70vw);
         }

         /* Chat widget */
         .chat-box {
             width: 320px;
             right: 20px;
         }

         /* Newsletter */
         .newsletter-form {
             flex-direction: column;
         }

         .newsletter-input,
         .newsletter-button {
             width: 100%;
         }
     }

     /* Tablets (769px - 1024px) */
     @media (max-width: 1024px) and (min-width: 769px) {
         html {
             scroll-padding-top: 80px;
         }

         section {
             scroll-margin-top: 80px;
             padding: 4rem 2rem;
         }

         /* Header/Nav adjustments */
         .nav-container {
             gap: 1.5rem;
             padding: 0.75rem 1.25rem;
         }

         .nav-link {
             font-size: 0.85rem;
             padding: 0.4rem 0.8rem;
         }

         .port {
             font-size: 24px;
         }

         /* Hero section */
         .hero {
             padding: 6rem 2rem 3rem;
         }

         .hero-title-fade-in {
             font-size: clamp(2rem, 4vw, 2.2rem);
         }

         .hero-subtitle {
             font-size: clamp(1.5rem, 3vw, 1.9rem);
         }

         .hero-description {
             font-size: clamp(1.2rem, 2.5vw, 1.4rem);
         }

         /* Grid layouts */
         .about-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 25px;
         }

         .grid-item-large {
             grid-column: span 2;
         }

         .projects-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 25px;
         }

         .services-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 25px;
         }

         .blog-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 25px;
         }

         .experience-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 25px;
         }

         /* Footer */
         .footer-content {
             grid-template-columns: 2fr 1fr 1fr;
             gap: 30px;
         }

         /* Contact section */
         .contact-container {
             grid-template-columns: 1fr 1fr;
             gap: 30px;
         }

         /* Profile image */
         .profile-container {
             width: min(350px, 60vw);
             height: min(350px, 60vw);
         }

         /* Swiper */
         .swiper {
             height: 350px;
         }
     }

     /* Desktop (≥ 1025px) */
     @media (min-width: 1025px) {

         /* Contact section desktop layout */
         .contact-container {
             grid-template-columns: 1fr 1fr;
             gap: 40px;
         }

         /* Projects grid desktop layout */
         .projects-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 30px;
         }

         /* About grid desktop layout */
         .about-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 30px;
         }

         .grid-item-large {
             grid-column: span 2;
         }

         /* Services grid desktop layout */
         .services-grid {
             grid-template-columns: repeat(4, 1fr);
             gap: 30px;
         }

         /* Experience grid desktop layout */
         .experience-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 30px;
         }

         /* Blog grid desktop layout */
         .blog-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 30px;
         }

         /* Footer desktop layout */
         .footer-content {
             grid-template-columns: 2fr 1fr 1fr 1.5fr;
             gap: 40px;
         }
     }

     /* High Contrast Support */
     @media (prefers-contrast: high) {
         :root {
             --surface: rgba(255, 255, 255, 0.98);
             --border: rgba(0, 0, 0, 0.8);
         }

         .dark-theme {
             --surface: rgba(0, 0, 0, 0.98);
             --border: rgba(255, 255, 255, 0.8);
         }
     }

     /* Reduced Motion Support */
     @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 complex animations */
         .animated-bg,
         .particles,
         .falling-stars,
         .morph-shape {
             animation: none !important;
         }

         /* Keep essential transitions but make them instant */
         .glass-card,
         .interactive-card {
             transition: opacity 0.01ms !important;
         }

         /* Disable hover effects */
         .glass-card:hover,
         .interactive-card:hover,
         .project-card:hover,
         .service-card:hover,
         .experience-card:hover,
         .blog-card:hover {
             transform: none !important;
         }
     }

     /* Print Styles */
     @media print {

         .animated-bg,
         .chat-widget,
         .section-nav,
         .theme-toggle,
         .mobile-menu-toggle,
         .back-to-top {
             display: none !important;
         }

         .glass-card {
             background: white !important;
             backdrop-filter: none !important;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
             border: 1px solid #ddd !important;
         }

         body {
             background: white !important;
             color: black !important;
             font-size: 12pt;
         }

         .hero-btn,
         .cta-button {
             background: #ccc !important;
             color: black !important;
             box-shadow: none !important;
         }

         a {
             color: black !important;
             text-decoration: underline;
         }

         .profile-img {
             filter: grayscale(100%) !important;
         }
     }

     /* Safe area for iPhone X+ */
     @supports (padding-bottom: env(safe-area-inset-bottom)) {
         footer {
             padding-bottom: calc(1rem + env(safe-area-inset-bottom));
         }

         .chat-widget,
         .back-to-top {
             bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
         }

         .chat-box {
             bottom: calc(100px + env(safe-area-inset-bottom));
         }
     }

     /* Ensure images are always responsive */
     img,
     video,
     canvas,
     svg {
         max-width: 100%;
         height: auto;
         display: block;
     }

     /* Fix table/overflow issues if any exist invisibly */
     .table-responsive {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }

     /* Performance optimizations */
     .will-change {
         will-change: transform, opacity;
     }

     .contained-section {
         contain: layout style paint;
     }

     .performance-contain {
         contain: layout style paint;
     }

     /* Enhanced focus for keyboard navigation */
     .focus-trap {
         outline: 2px dashed var(--primary);
         outline-offset: 4px;
     }


     /* =========================================
   MISSING CSS STYLES - COMPLETE ADDITIONS
   ========================================= */

     /* 1. Timeline Component - Missing from HTML */
     .timeline {
         position: relative;
         max-width: 1200px;
         margin: 0 auto;
     }

     .timeline::before {
         content: '';
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         width: 3px;
         height: 100%;
         background: linear-gradient(to bottom, var(--primary), var(--accent-2));
     }

     .timeline-item {
         position: relative;
         margin-bottom: var(--space-xl);
         width: 50%;
         opacity: 0;
         transform: translateY(30px);
         animation: fadeInUp 0.6s ease forwards;
     }

     .timeline-item::after {
         content: '';
         position: absolute;
         top: 20px;
         width: 20px;
         height: 20px;
         background: var(--primary);
         border: 4px solid var(--background);
         border-radius: 50%;
         z-index: 1;
         box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
     }

     .timeline-item:nth-child(odd) {
         left: 0;
         padding-right: var(--space-xl);
         animation-delay: 0.1s;
     }

     .timeline-item:nth-child(odd)::after {
         right: -10px;
     }

     .timeline-item:nth-child(even) {
         left: 50%;
         padding-left: var(--space-xl);
         animation-delay: 0.2s;
     }

     .timeline-item:nth-child(even)::after {
         left: -10px;
     }

     .timeline-content {
         background: var(--surface);
         padding: var(--space-lg);
         border-radius: var(--card-radius);
         position: relative;
         border: 1px solid var(--border);
         transition: var(--transition);
     }

     .timeline-content:hover {
         transform: translateY(-3px);
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     }

     .timeline-date {
         font-weight: bold;
         color: var(--primary);
         margin-bottom: var(--space-sm);
         font-size: var(--text-lg);
     }

     /* 2. Image Carousel Dots */
     .carousel-dots {
         position: absolute;
         bottom: 20px;
         left: 0;
         right: 0;
         display: flex;
         justify-content: center;
         gap: 10px;
         z-index: 10;
     }

     .carousel-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.5);
         border: 2px solid rgba(255, 255, 255, 0.8);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .carousel-dot.active {
         background: rgba(255, 255, 255, 0.9);
         transform: scale(1.2);
     }

     /* 3. Note element (used in Contact section) */
     .note {
         display: block;
         margin-top: 10px;
         font-style: italic;
         color: var(--text-secondary);
         font-size: 0.9em;
         padding: 8px 12px;
         background: rgba(0, 122, 255, 0.05);
         border-radius: 8px;
         border-left: 3px solid var(--primary);
     }

     /* 4. Testimonial slider specific styles */
     .testimonial-slider {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 25px;
         width: 100%;
     }

     .testimonial-card {
         padding: 25px;
         border: 1px solid var(--border);
         transition: all 0.3s ease;
     }

     .testimonial-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     }

     /* 5. Portfolio carousel specific styles */
     .portfolio-carousel {
         position: relative;
         overflow: hidden;
         border-radius: var(--card-radius);
         margin: 40px 0;
         border: 1px solid var(--border);
     }

     .swiper {
         width: 100%;
         height: 400px;
     }

     .swiper-slide {
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: var(--card-radius);
         overflow: hidden;
         position: relative;
     }

     .swiper-slide img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .swiper-slide:hover img {
         transform: scale(1.05);
     }

     .slide-content {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
         color: white;
         padding: 30px 20px 20px;
         transform: translateY(100%);
         transition: transform 0.4s ease;
     }

     .swiper-slide:hover .slide-content {
         transform: translateY(0);
     }

     .slide-content h3 {
         font-size: 1.4rem;
         margin-bottom: 10px;
         font-weight: 600;
     }

     .slide-content p {
         font-size: 0.9rem;
         margin-bottom: 15px;
         opacity: 0.9;
     }

     /* Swiper pagination dots */
     .swiper-pagination-bullet {
         background: var(--text-secondary) !important;
         opacity: 0.5 !important;
         width: 10px !important;
         height: 10px !important;
         margin: 0 6px !important;
     }

     .swiper-pagination-bullet-active {
         background: var(--primary) !important;
         opacity: 1 !important;
         transform: scale(1.2);
     }

     /* 6. Newsletter form in footer */
     .newsletter-section-footer {
         margin-top: 0;
         border-top: none;
         padding-top: 0;
     }

     .newsletter-form {
         display: flex;
         gap: 10px;
         margin-top: 15px;
     }

     .newsletter-input {
         flex: 1;
         padding: 10px 15px;
         border-radius: 25px;
         border: 1px solid var(--border);
         background: rgba(255, 255, 255, 0.05);
         color: var(--text);
         font-size: 14px;
         transition: var(--transition);
     }

     .newsletter-input:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
     }

     /* 7. Service link styles */
     .service-link {
         text-decoration: none;
         color: inherit;
         display: block;
         transition: transform 0.3s ease;
     }

     .service-link:hover {
         transform: translateY(-5px);
     }

     /* 8. Location container specific styles */
     .location-container {
         position: relative;
         display: flex;
         flex-direction: column;
         gap: 15px;
     }

     .location-map {
         margin-top: 15px;
         overflow: hidden;
         border-radius: var(--card-radius);
         border: 1px solid var(--border);
     }

     .embed-map-container {
         width: 100%;
         height: 200px;
         border-radius: var(--card-radius);
         overflow: hidden;
     }

     .embed-map-frame {
         width: 100%;
         height: 100%;
         border: 0;
         filter: grayscale(100%) invert(90%);
     }

     /* 9. Text utilities missing from CSS */
     .text-center {
         text-align: center;
     }

     .text-left {
         text-align: left;
     }

     .text-right {
         text-align: right;
     }

     /* 10. Margin/Padding utilities */
     .m-0 {
         margin: 0 !important;
     }

     .mt-1 {
         margin-top: 0.25rem !important;
     }

     .mt-2 {
         margin-top: 0.5rem !important;
     }

     .mt-3 {
         margin-top: 1rem !important;
     }

     .mt-4 {
         margin-top: 1.5rem !important;
     }

     .mt-5 {
         margin-top: 2rem !important;
     }

     .mb-1 {
         margin-bottom: 0.25rem !important;
     }

     .mb-2 {
         margin-bottom: 0.5rem !important;
     }

     .mb-3 {
         margin-bottom: 1rem !important;
     }

     .mb-4 {
         margin-bottom: 1.5rem !important;
     }

     .mb-5 {
         margin-bottom: 2rem !important;
     }

     .p-0 {
         padding: 0 !important;
     }

     .pt-1 {
         padding-top: 0.25rem !important;
     }

     .pt-2 {
         padding-top: 0.5rem !important;
     }

     .pt-3 {
         padding-top: 1rem !important;
     }

     .pt-4 {
         padding-top: 1.5rem !important;
     }

     .pt-5 {
         padding-top: 2rem !important;
     }

     .pb-1 {
         padding-bottom: 0.25rem !important;
     }

     .pb-2 {
         padding-bottom: 0.5rem !important;
     }

     .pb-3 {
         padding-bottom: 1rem !important;
     }

     .pb-4 {
         padding-bottom: 1.5rem !important;
     }

     .pb-5 {
         padding-bottom: 2rem !important;
     }



     /* 12. Button variants missing */
     .hero-btn.outline {
         background: transparent;
         border: 2px solid var(--primary);
         color: var(--primary);
     }

     .hero-btn.outline::before {
         display: none;
     }

     .hero-btn.outline:hover {
         background: var(--primary);
         color: white;
     }

     /* 13. Form control missing */
     .form-control {
         width: 100%;
         padding: 12px 16px;
         border-radius: 8px;
         border: 1px solid var(--border);
         background: var(--surface);
         color: var(--text);
         font-size: 14px;
         transition: var(--transition);
     }

     .form-control:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
     }

     /* 14. Case study modal button styles */
     .case-study-btn {
         background: var(--accent-1);
         border: none;
         color: white;
         padding: 10px 20px;
         border-radius: 25px;
         cursor: pointer;
         transition: var(--transition);
         font-weight: 500;
     }

     .case-study-btn:hover {
         background: var(--accent-2);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     /* 15. Image hover zoom effect */
     .image-hover-zoom {
         overflow: hidden;
         border-radius: var(--card-radius) var(--card-radius) 0 0;
     }

     .image-hover-zoom img {
         transition: transform 0.5s ease;
     }

     .image-hover-zoom:hover img {
         transform: scale(1.05);
     }

     /* 16. Responsive utilities for images */
     .responsive-img {
         max-width: 100%;
         height: auto;
         display: block;
     }

     /* 17. Display utilities */
     .d-block {
         display: block !important;
     }

     .d-inline {
         display: inline !important;
     }

     .d-inline-block {
         display: inline-block !important;
     }

     .d-flex {
         display: flex !important;
     }

     .d-none {
         display: none !important;
     }

     /* 18. Flex utilities */
     .flex-column {
         flex-direction: column !important;
     }

     .flex-row {
         flex-direction: row !important;
     }

     .flex-wrap {
         flex-wrap: wrap !important;
     }

     .flex-nowrap {
         flex-wrap: nowrap !important;
     }

     .justify-content-start {
         justify-content: flex-start !important;
     }

     .justify-content-center {
         justify-content: center !important;
     }

     .justify-content-end {
         justify-content: flex-end !important;
     }

     .justify-content-between {
         justify-content: space-between !important;
     }

     .align-items-start {
         align-items: flex-start !important;
     }

     .align-items-center {
         align-items: center !important;
     }

     .align-items-end {
         align-items: flex-end !important;
     }

     .align-items-stretch {
         align-items: stretch !important;
     }

     /* 19. Grid item specific for large screens */
     @media (min-width: 1025px) {
         .grid-item-large {
             grid-column: span 2;
         }
     }

     /* 20. Contact form animation */
     @keyframes formSlideIn {
         from {
             opacity: 0;
             transform: translateX(30px);
         }

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

     .contact-form-container {
         animation: formSlideIn 0.8s ease-out forwards;
     }

     /* 21. Section transition effects */
     .section-transition {
         transition: all 0.5s ease;
     }

     /* 22. Loading screen specific */
     #sr-announcements {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0;
     }

     /* 23. Portfolio logo in loading screen */
     .portfolio-logo {
         display: flex;
         align-items: center;
         gap: 15px;
         font-family: "Bungee Shade", sans-serif;
         font-size: clamp(1.5rem, 4vw, 2.5rem);
         color: #00D4FF;
         margin-bottom: 20px;
         text-align: center;
     }

     /* 24. Stagger animation delays for more items */
     .stagger-animation>*:nth-child(6) {
         animation-delay: 0.6s;
     }

     .stagger-animation>*:nth-child(7) {
         animation-delay: 0.7s;
     }

     .stagger-animation>*:nth-child(8) {
         animation-delay: 0.8s;
     }

     .stagger-animation>*:nth-child(9) {
         animation-delay: 0.9s;
     }

     .stagger-animation>*:nth-child(10) {
         animation-delay: 1.0s;
     }

     /* 25. Modal close button styles */
     .modal-close {
         position: absolute;
         top: 15px;
         right: 15px;
         background: none;
         border: none;
         color: var(--text);
         font-size: 1.5rem;
         cursor: pointer;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
         z-index: 10;
     }

     .modal-close:hover,
     .modal-close:focus {
         background: rgba(0, 0, 0, 0.1);
         transform: scale(1.1);
     }

     /* 26. Tech stack styles for case study modal */
     .tech-stack {
         margin-top: 20px;
         padding-top: 20px;
         border-top: 1px solid var(--border);
     }

     .tech-stack h3 {
         margin-bottom: 15px;
         color: var(--text);
         font-size: 1.2rem;
     }

     /* 27. Embedded map responsiveness */
     .embed-map-responsive {
         position: relative;
         width: 100%;
         padding-bottom: 56.25%;
         /* 16:9 Aspect Ratio */
         height: 0;
         overflow: hidden;
         border-radius: var(--card-radius);
     }

     .embed-map-frame {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: 0;
         filter: grayscale(100%) invert(90%);
     }

     /* 28. Service link in tools section */
     .service-link {
         text-decoration: none;
         color: inherit;
     }

     .service-link .service-card {
         transition: all 0.4s ease;
     }

     .service-link:hover .service-card {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
     }

     /* 29. Playground section button styles */
     .playground .cta-button {
         margin-top: 20px;
     }

     /* 30. Testimonial author styles */
     .author-info {
         display: flex;
         flex-direction: column;
     }

     .author-info h4 {
         font-size: 1.1rem;
         margin-bottom: 5px;
         color: var(--text);
     }

     .author-info p {
         color: var(--text-secondary);
         font-size: 0.9rem;
     }

     /* 31. Portfolio carousel navigation */
     .swiper-button-next,
     .swiper-button-prev {
         color: var(--primary) !important;
         background: rgba(255, 255, 255, 0.8);
         width: 40px !important;
         height: 40px !important;
         border-radius: 50%;
         backdrop-filter: blur(4px);
         border: 1px solid var(--border);
     }

     .swiper-button-next::after,
     .swiper-button-prev::after {
         font-size: 1.2rem !important;
         font-weight: bold;
     }

     /* 32. Blog meta styles */
     .blog-meta {
         display: flex;
         gap: 15px;
         margin-bottom: 12px;
         font-size: 0.85rem;
         color: var(--text-secondary);
     }

     .blog-meta span {
         display: flex;
         align-items: center;
         gap: 5px;
     }

     /* 33. Code editor styles */
     .editor-content pre {
         margin: 0;
         overflow-x: auto;
     }

     .editor-content code {
         font-family: 'Courier New', monospace;
         font-size: 14px;
         line-height: 1.5;
         color: #d4d4d4;
     }

     /* 34. Scroll behavior for smooth sections */
     html {
         scroll-behavior: smooth;
     }

     /* 35. Ensure all interactive elements have proper cursor */
     button,
     a,
     input[type="submit"],
     input[type="button"] {
         cursor: pointer;
     }

     /* 36. Prevent text selection on interactive elements */
     button,
     .hero-btn,
     .cta-button,
     .filter-btn {
         user-select: none;
     }

     /* 37. Fix for iOS tap highlight */
     button,
     a {
         -webkit-tap-highlight-color: transparent;
     }

     /* 38. Loading screen specific responsive fixes */
     @media (max-width: 480px) {
         .portfolio-logo {
             font-size: 1.5rem;
             flex-direction: column;
             gap: 10px;
         }

         .progress-container {
             width: 250px;
         }

         .loading-percentage {
             font-size: 0.9rem;
             padding: 0 15px;
         }
     }

     /* 39. Phase 2 Styles: Cookie Banner, Skeleton, High Contrast */
     .cookie-banner {
         position: fixed;
         bottom: 20px;
         left: 20px;
         right: 20px;
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         padding: 20px;
         border-radius: 15px;
         z-index: 10000;
         display: none;
         flex-direction: column;
         gap: 15px;
         max-width: 400px;
         margin-left: auto;
         color: var(--text);
         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     }

     .cookie-banner.show {
         display: flex;
         animation: slideUp 0.5s ease;
     }

     @keyframes slideUp {
         from {
             transform: translateY(100px);
             opacity: 0;
         }

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

     /* Skeleton Loading */
     .skeleton-loading {
         background: linear-gradient(90deg,
                 var(--glass-bg) 25%,
                 rgba(255, 255, 255, 0.2) 50%,
                 var(--glass-bg) 75%);
         background-size: 200% 100%;
         animation: shimmer 1.5s infinite;
         min-height: 200px;
         opacity: 0.7;
     }

     img.skeleton-loading {
         min-height: 0;
         /* Let image decide, but keep animation */
     }

     @keyframes shimmer {
         0% {
             background-position: 200% 0;
         }

         100% {
             background-position: -200% 0;
         }
     }

     /* High Contrast Mode */
     body.high-contrast {
         --bg-color: #000000 !important;
         --text: #ffffff !important;
         --text-secondary: #ffff00 !important;
         --primary: #00ffff !important;
         --secondary: #ff00ff !important;
         --glass-bg: #000000 !important;
         --glass-border: 2px solid #ffffff !important;
         --glass-shadow: none !important;
         --card-shadow: none !important;
     }

     body.high-contrast .glass-card,
     body.high-contrast .interactive-card,
     body.high-contrast .service-card,
     body.high-contrast .project-card,
     body.high-contrast .navbar,
     body.high-contrast .nav-container {
         background: #000000 !important;
         border: 2px solid #ffffff !important;
         backdrop-filter: none !important;
         box-shadow: none !important;
     }

     body.high-contrast .text-gradient {
         background: none !important;
         -webkit-text-fill-color: #00ffff !important;
         color: #00ffff !important;
     }

     /* Fix for iframe border in contact section */
     .embed-map-frame {
         border: none;
     }

     /* Final missing: Chat input focus state */
     /* Final missing: Chat input focus state */
     #chatInput:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
     }

     /* 41. Phase 3: Typewriter & Touch Targets */

     /* Typewriter Cursor */
     .typewriter-text {
         border-right: 3px solid var(--primary);
         animation: blink-caret 0.75s step-end infinite;
         padding-right: 5px;
     }

     @keyframes blink-caret {

         from,
         to {
             border-color: transparent
         }

         50% {
             border-color: var(--primary);
         }
     }

     /* Touch Optimization for Toggles */
     .theme-toggle {
         min-width: 44px;
         min-height: 44px;
         display: flex;
         align-items: center;
     }

     /* Section Navigation Dots & Active State */
     .section-nav {
         position: fixed;
         right: 20px;
         top: 50%;
         transform: translateY(-50%);
         display: flex;
         flex-direction: column;
         gap: 15px;
         z-index: 1000;
         display: none;
     }

     @media (min-width: 769px) {
         .section-nav {
             display: flex;
         }
     }

     .section-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.3);
         cursor: pointer;
         transition: all 0.3s ease;
         position: relative;
     }

     .section-dot:hover,
     .section-dot.active {
         transform: scale(1.3);
         background: var(--primary);
         box-shadow: 0 0 10px var(--primary);
     }

     .section-dot::after {
         content: attr(data-section);
         position: absolute;
         right: 25px;
         top: 50%;
         transform: translateY(-50%);
         background: var(--surface);
         padding: 5px 10px;
         border-radius: 4px;
         font-size: 12px;
         opacity: 0;
         pointer-events: none;
         transition: all 0.3s ease;
         text-transform: capitalize;
         color: var(--text);
     }

     .section-dot:hover::after {
         opacity: 1;
         transform: translateY(-50%) translateX(-5px);
     }

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

     .nav-link.active::after {
         width: 100%;
     }

     /* Blur-up Image Loading */
     img {
         transition: filter 0.5s ease-out, opacity 0.5s ease-out;
     }

     img.blur-load {
         filter: blur(20px);
         opacity: 0;
     }

     img.loaded {
         filter: blur(0);
         opacity: 1;
     }

     /* --- Phase 5: Optimization & Skeletons --- */

     /* Font Optimization */
     @font-face {
         font-family: 'Inter';
         font-display: swap;
         src: local('Inter');
     }

     /* Skeleton Loading System */
     .skeleton {
         background: linear-gradient(90deg,
                 rgba(255, 255, 255, 0.05) 25%,
                 rgba(255, 255, 255, 0.1) 37%,
                 rgba(255, 255, 255, 0.05) 63%);
         background-size: 400% 100%;
         animation: skeleton-loading 1.4s ease infinite;
         border-radius: 4px;
     }

     .skeleton-text {
         height: 1em;
         margin-bottom: 0.5em;
         width: 100%;
     }

     .skeleton-text.short {
         width: 60%;
     }

     .skeleton-block {
         width: 100%;
         height: 200px;
     }

     .skeleton-circle {
         width: 50px;
         height: 50px;
         border-radius: 50%;
     }

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

         100% {
             background-position: 0 50%;
         }
     }

     /* Content Visibility (Lazy Rendering) */
     section:not(#home) {
         content-visibility: auto;
         contain-intrinsic-size: 1000px;
     }

     /* Command Palette */
     .command-palette-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(10px);
         z-index: 10000;
         display: none;
         justify-content: center;
         align-items: flex-start;
         padding-top: 10vh;
         opacity: 0;
         transition: opacity 0.3s ease;
     }

     .command-palette-overlay.active {
         display: flex;
         opacity: 1;
     }

     .command-palette {
         width: 90%;
         max-width: 600px;
         background: var(--surface);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 12px;
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
         display: flex;
         flex-direction: column;
         overflow: hidden;
         transform: translateY(-20px);
         transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     }

     .command-palette-overlay.active .command-palette {
         transform: translateY(0);
     }

     .cmd-input-wrapper {
         display: flex;
         align-items: center;
         padding: 15px 20px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .cmd-input-wrapper i {
         color: var(--secondary);
         margin-right: 15px;
         font-size: 1.2rem;
     }

     .cmd-input {
         background: transparent;
         border: none;
         color: var(--text);
         font-size: 1.1rem;
         width: 100%;
         outline: none;
     }

     .cmd-results {
         max-height: 400px;
         overflow-y: auto;
         padding: 10px 0;
     }

     .cmd-item {
         padding: 12px 20px;
         display: flex;
         align-items: center;
         cursor: pointer;
         transition: background 0.2s;
         color: var(--text-secondary);
     }

     .cmd-item:hover,
     .cmd-item.selected {
         background: rgba(255, 255, 255, 0.05);
         color: var(--primary);
     }

     .cmd-item i {
         margin-right: 15px;
         width: 20px;
         text-align: center;
     }

     .cmd-shortcut {
         margin-left: auto;
         font-size: 0.8rem;
         opacity: 0.5;
         background: rgba(255, 255, 255, 0.1);
         padding: 2px 6px;
         border-radius: 4px;
     }

     .cmd-category {
         font-size: 0.75rem;
         text-transform: uppercase;
         font-weight: 600;
         color: var(--primary);
         padding: 12px 20px 8px;
         opacity: 0.7;
         letter-spacing: 1px;
     }

     .cmd-no-results {
         text-align: center;
         padding: 40px 20px;
         color: rgba(255, 255, 255, 0.5);
         font-size: 0.9rem;
     }

     /* 42. Responsive Grid Fixes */
     @media (min-width: 768px) {
         .contact-container {
             grid-template-columns: 1fr 1fr;
         }

         .footer-content {
             grid-template-columns: repeat(2, 1fr);
         }
     }

     @media (min-width: 1024px) {
         .footer-content {
             grid-template-columns: repeat(4, 1fr);
         }
     }

     html {
         scroll-padding-top: 100px;
     }

     /* =========================================
          43. UI Refinements (Certificates, Footer, Mobile)
          ========================================= */

     /* Certificate Card Styling */
     .certificate-card {
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border: 1px solid rgba(255, 255, 255, 0.1);
         background: rgba(255, 255, 255, 0.03);
     }

     .certificate-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
         border-color: rgba(0, 212, 255, 0.3);
     }

     .certificate-card i {
         filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
         transition: transform 0.3s ease;
     }

     .certificate-card:hover i {
         transform: scale(1.1) rotate(5deg);
     }

     /* Footer Improvements */
     .footer-content {
         display: grid;
         grid-template-columns: 1fr;
         gap: 2rem;
         padding-bottom: 2rem;
     }

     .footer-about p {
         line-height: 1.6;
         margin-bottom: 1.5rem;
     }

     .footer-links ul {
         list-style: none;
         padding: 0;
     }

     .footer-links li {
         margin-bottom: 0.8rem;
     }

     .footer-links a {
         color: var(--text-secondary);
         text-decoration: none;
         transition: color 0.3s ease, padding-left 0.3s ease;
         display: inline-block;
     }

     .footer-links a:hover {
         color: var(--primary);
         padding-left: 5px;
     }

     /* Newsletter Input Polish */
     .newsletter-input {
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         color: white;
         padding: 10px 15px;
         border-radius: 5px;
         width: 70%;
     }

     .newsletter-form {
         display: flex;
         gap: 10px;
     }

     /* Mobile Responsiveness Improvements */
     @media (max-width: 768px) {
         .section-title {
             font-size: 2rem;
         }

         .container {
             padding-left: 1.5rem;
             padding-right: 1.5rem;
         }

         .contact-container {
             grid-template-columns: 1fr;
         }

         .footer-content {
             grid-template-columns: 1fr !important;
             /* Force stack on mobile */
             text-align: center;
         }

         .footer-about,
         .footer-links,
         .newsletter-section-footer {
             padding: 1.5rem;
         }

         .social-icons {
             justify-content: center;
         }

         .newsletter-form {
             flex-direction: column;
         }

         .newsletter-input {
             width: 100%;
         }
     }

     /* Mobile Theme Toggle Fix */
     @media (max-width: 768px) {

         .theme-toggle,
         #highContrastToggle {
             display: flex !important;
             position: absolute;
             top: 20px;
             right: 70px;
             z-index: 10001;
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
             width: 40px;
             height: 40px;
             align-items: center;
             justify-content: center;
             border-radius: 50%;
             color: var(--text);
         }

         #highContrastToggle {
             right: 120px;
         }

         .theme-toggle i,
         #highContrastToggle i {
             font-size: 1.2rem;
         }
     }

     /* 
   Enhanced Portfolio Styling 
   Targeting specific sections: Open Source, Speaking, Publications, Collaborate, Experience
   Uses variables from 2-style.css
*/

     /* =========================================
   1. Open Source Section
   ========================================= */
     .opensource-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
         padding: 1rem 0;
     }

     .opensource-card {
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         text-align: left;
         background: rgba(255, 255, 255, 0.03);
         /* Subtle override */
     }

     .repo-header {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1rem;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         padding-bottom: 1rem;
     }

     .repo-header i.fab {
         font-size: 2rem;
         color: var(--text);
     }

     .repo-header h3 {
         flex-grow: 1;
         font-size: 1.25rem;
         margin: 0;
         color: var(--primary-light);
     }

     .repo-stars {
         background: rgba(255, 215, 0, 0.1);
         color: #ffd700;
         padding: 0.25rem 0.75rem;
         border-radius: 2rem;
         font-size: 0.9rem;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .repo-description {
         color: var(--text-secondary);
         margin-bottom: 1.5rem;
         line-height: 1.6;
         flex-grow: 1;
     }

     .repo-tech {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
         margin-bottom: 1.5rem;
     }

     .tech-badge {
         font-size: 0.8rem;
         font-family: 'Fira Code', monospace;
         padding: 0.25rem 0.75rem;
         background: rgba(0, 122, 255, 0.1);
         color: var(--primary-light);
         border-radius: 4px;
         border: 1px solid rgba(0, 122, 255, 0.2);
     }

     .repo-stats {
         display: flex;
         justify-content: space-between;
         margin-bottom: 1.5rem;
         font-size: 0.9rem;
         color: var(--text-secondary);
     }

     .repo-stats span {
         display: flex;
         align-items: center;
         gap: 0.4rem;
     }

     .repo-stats i {
         color: var(--primary);
     }

     /* =========================================
   2. Speaking & Workshops Section
   ========================================= */
     .talks-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 2rem;
     }

     .talk-card {
         position: relative;
         padding-top: 3.5rem;
         /* Space for date badge */
         border-left: 3px solid var(--accent-1);
         background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
     }

     .talk-date {
         position: absolute;
         top: 1.5rem;
         right: 1.5rem;
         background: var(--accent-1);
         color: white;
         padding: 0.25rem 1rem;
         border-radius: 2rem;
         font-size: 0.85rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1px;
         box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
     }

     .talk-card h3 {
         font-size: 1.4rem;
         margin-bottom: 0.5rem;
         background: linear-gradient(90deg, #fff, #ccc);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
     }

     .talk-event {
         color: var(--accent-2);
         font-weight: 500;
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .talk-event::before {
         content: '';
         display: inline-block;
         width: 6px;
         height: 6px;
         background: var(--accent-2);
         border-radius: 50%;
     }

     .talk-links {
         display: flex;
         gap: 1rem;
         margin-top: 1.5rem;
         padding-top: 1rem;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
     }

     .talk-link {
         font-size: 0.9rem;
         color: var(--text);
         display: flex;
         align-items: center;
         gap: 0.5rem;
         transition: color 0.3s ease;
     }

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

     /* =========================================
   3. Publications Section
   ========================================= */
     .publications-list {
         display: flex;
         flex-direction: column;
         gap: 2rem;
     }

     .publication-card {
         display: grid;
         grid-template-columns: 1fr;
         gap: 1.5rem;
         padding: 2rem;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     @media (min-width: 768px) {
         .publication-card {
             grid-template-columns: 3fr 1fr;
             align-items: center;
         }

         .publication-card a.hero-btn {
             grid-column: 2;
             grid-row: 1 / 4;
             align-self: center;
         }
     }

     .publication-meta {
         display: flex;
         gap: 1rem;
         align-items: center;
         margin-bottom: 0.5rem;
     }

     .publication-type {
         text-transform: uppercase;
         letter-spacing: 1.5px;
         font-size: 0.75rem;
         font-weight: 700;
         color: var(--accent-3);
         border: 1px solid var(--accent-3);
         padding: 0.2rem 0.6rem;
         border-radius: 4px;
     }

     .publication-date {
         color: var(--text-secondary);
         font-size: 0.9rem;
     }

     .publication-source {
         font-style: italic;
         color: var(--primary-light);
         margin-bottom: 1rem;
     }

     .publication-stats {
         display: flex;
         gap: 1.5rem;
         margin-top: 1rem;
         font-size: 0.9rem;
         color: var(--text-secondary);
     }

     /* =========================================
   4. Collaborate Section
   ========================================= */
     .collaboration-options {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
     }

     .collab-option {
         text-align: center;
         padding: 3rem 2rem;
         border-top: 5px solid var(--primary);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .collab-option:nth-child(2) {
         border-top-color: var(--accent-2);
     }

     .collab-option:nth-child(3) {
         border-top-color: var(--accent-4);
     }

     .collab-option:nth-child(4) {
         border-top-color: var(--accent-1);
     }

     .collab-icon {
         font-size: 3rem;
         margin-bottom: 1.5rem;
         background: linear-gradient(135deg, var(--primary), var(--accent-2));
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         filter: drop-shadow(0 5px 15px rgba(0, 122, 255, 0.3));
     }

     .collab-features {
         text-align: left;
         margin: 2rem 0;
         padding-left: 1.5rem;
     }

     .collab-features li {
         list-style-type: none;
         position: relative;
         margin-bottom: 0.8rem;
         color: var(--text-secondary);
     }

     .collab-features li::before {
         content: '✓';
         position: absolute;
         left: -1.5rem;
         color: var(--success);
         font-weight: bold;
     }

     /* =========================================
   5. Experience & General Enhancements
   ========================================= */
     .experience-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
     }

     .experience-card {
         position: relative;
         overflow: hidden;
     }

     .experience-card::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 4px;
         height: 100%;
         background: linear-gradient(to bottom, var(--primary), transparent);
     }

     .experience-card h3 {
         margin-bottom: 0.25rem;
         font-size: 1.3rem;
     }

     .experience-card .company {
         color: var(--primary-light);
         font-weight: 600;
         margin-bottom: 0.25rem;
     }

     .experience-card .duration {
         font-size: 0.85rem;
         color: var(--text-secondary);
         margin-bottom: 1rem;
         display: block;
         font-family: monospace;
     }

     /* Text Shimmer Effect for headings */
     .text-shimmer {
         background: linear-gradient(to right,
                 var(--primary-light) 0%,
                 #fff 50%,
                 var(--primary-light) 100%);
         background-size: 200% auto;
         color: transparent;
         -webkit-background-clip: text;
         background-clip: text;
         animation: shimmer 3s linear infinite;
     }

     @keyframes shimmer {
         to {
             background-position: 200% center;
         }
     }

     /* Modern Gradient Text */
     .text-gradient {
         background: linear-gradient(135deg, var(--primary-light), var(--accent-2));
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
     }

     /* Improved Breadcrumbs */
     .breadcrumb {
         font-family: 'Fira Code', monospace;
         font-size: 0.85rem;
         margin-bottom: 1rem;
         opacity: 0.8;
     }

     .breadcrumb a {
         color: var(--text-secondary);
         transition: color 0.2s;
     }

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

     .breadcrumb-separator {
         margin: 0 0.5rem;
         color: rgba(255, 255, 255, 0.2);
     }

     /* Responsive Fixes */
     @media (max-width: 768px) {

         .repo-stats,
         .publication-stats {
             flex-direction: column;
             gap: 0.5rem;
         }

         .talk-card {
             padding-top: 4rem;
         }

         .glass-card {
             padding: 1.5rem !important;
         }
     }

     /* ==========================================================================
   AMOLED & PREMIUM ENHANCEMENTS FOR REMAINING SECTIONS
   Targeting: Routine, Goals, Tech Stack, Services, Process, Impact
   ========================================================================== */

     /* AMOLED Black Theme Overrides */
     .dark-theme {
         --background: #000000;
         --surface: rgba(10, 10, 10, 0.85);
         /* Darker surface for AMOLED */
         --surface-solid: #000000;
         --border: rgba(255, 255, 255, 0.15);
     }

     .dark-theme .glass-card {
         background: rgba(5, 5, 5, 0.7);
         border: 1px solid rgba(255, 255, 255, 0.1);
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
         /* Stronger shadow */
     }

     /* 1. Daily Routine & Habits (#routine) */
     .routine-timeline {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1.5rem;
         position: relative;
         padding: 2rem 0;
     }

     .routine-item {
         padding: 2rem;
         position: relative;
         transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         border-top: 3px solid var(--primary);
     }

     .routine-item:hover {
         transform: translateY(-8px) scale(1.02);
         box-shadow: 0 10px 30px rgba(0, 122, 255, 0.2);
     }

     .routine-time {
         position: absolute;
         top: -15px;
         right: 20px;
         background: var(--primary);
         color: white;
         padding: 5px 15px;
         border-radius: 20px;
         font-size: 0.8rem;
         font-weight: 700;
         box-shadow: 0 5px 15px rgba(0, 122, 255, 0.4);
     }

     .routine-icon {
         font-size: 2.5rem;
         margin-bottom: 1rem;
         background: linear-gradient(135deg, var(--primary), var(--accent-2));
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
     }

     .habits-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: 1rem;
         margin-top: 2rem;
     }

     .habit-item {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.03);
         border-radius: 10px;
         transition: background 0.3s ease;
     }

     .habit-item:hover {
         background: rgba(255, 255, 255, 0.08);
     }

     .habit-item i {
         color: var(--success);
     }

     /* 2. My Vision & Goals (#goals) */
     .goals-timeline {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
     }

     .goal-period h3 {
         margin-bottom: 1.5rem;
         text-align: center;
         font-size: 1.4rem;
         border-bottom: 2px solid rgba(255, 255, 255, 0.1);
         padding-bottom: 0.5rem;
     }

     .goals-list {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .goal-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 1.2rem;
         border-left: 3px solid var(--accent-3);
         border-radius: 8px;
         /* Slightly squarer */
     }

     .goal-item:hover {
         background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
     }

     .goal-item i {
         color: var(--accent-3);
         font-size: 1.1rem;
     }

     /* 3. Technology Stack (#tech-stack) */
     .tech-stack-categories {
         display: grid;
         gap: 2rem;
     }

     .tech-category {
         padding: 2rem;
     }

     .tech-category h3 {
         margin-bottom: 1.5rem;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .tech-icons {
         display: flex;
         flex-wrap: wrap;
         gap: 1.5rem;
         justify-content: flex-start;
     }

     .tech-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 0.5rem;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.02);
         border-radius: 12px;
         width: 100px;
         transition: var(--transition);
         border: 1px solid transparent;
     }

     .tech-item:hover {
         background: rgba(255, 255, 255, 0.08);
         transform: translateY(-5px);
         border-color: var(--primary);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     }

     .tech-item i,
     .tech-item img {
         font-size: 2.5rem;
         margin-bottom: 5px;
         transition: transform 0.3s ease;
     }

     .tech-item:hover i {
         transform: scale(1.1);
         color: var(--primary-light);
     }

     /* 4. My Services (#services) */
     .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
     }

     .service-card {
         text-align: center;
         padding: 3rem 2rem;
         border-bottom: 4px solid var(--primary);
         transition: transform 0.4s ease, border-color 0.3s ease;
     }

     .service-card:hover {
         transform: translateY(-10px);
         border-bottom-color: var(--accent-2);
     }

     .service-card i {
         font-size: 3.5rem;
         background: linear-gradient(135deg, var(--primary), var(--accent-6));
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-bottom: 1.5rem;
     }

     /* 5. Development Process (#process) */
     .process-timeline {
         position: relative;
         max-width: 900px;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
         gap: 2rem;
     }

     .process-step {
         display: grid;
         grid-template-columns: 80px 1fr;
         align-items: start;
         gap: 1.5rem;
         padding: 2rem;
         position: relative;
     }

     .step-number {
         font-size: 3rem;
         font-weight: 800;
         color: rgba(255, 255, 255, 0.05);
         font-family: 'Monoton', cursive;
         line-height: 1;
     }

     .step-icon {
         position: absolute;
         top: 2rem;
         left: 2rem;
         font-size: 1.5rem;
         color: var(--primary);
     }

     .process-step h3 {
         color: var(--primary-light);
         margin-bottom: 0.5rem;
         font-size: 1.5rem;
     }

     .step-tools {
         display: flex;
         gap: 10px;
         margin-top: 1rem;
         flex-wrap: wrap;
     }

     .step-tools li {
         background: rgba(255, 255, 255, 0.1);
         padding: 2px 10px;
         border-radius: 12px;
         font-size: 0.8rem;
         color: var(--text-secondary);
     }

     /* 6. My Impact (#stats) */
     .stats-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 2rem;
         text-align: center;
         padding: 2rem 0;
     }

     .stat-card {
         padding: 2rem;
         background: rgba(255, 255, 255, 0.02);
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.05);
     }

     .stat-number {
         font-size: 3rem;
         font-weight: 800;
         background: linear-gradient(135deg, var(--primary), var(--accent-3));
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-bottom: 0.5rem;
         font-family: 'Zen Dots', sans-serif;
     }

     .stat-label {
         text-transform: uppercase;
         letter-spacing: 2px;
         font-size: 0.9rem;
         color: var(--text-secondary);
     }

     /* ==========================================================================
     MOBILE PERFORMANCE ENHANCEMENTS
     ========================================================================== */
     @media (max-width: 768px) {

         /* Disable heavy animated background elements on mobile */
         .gradients-container,
         .particles,
         .falling-stars,
         .spotlight {
             display: none !important;
         }

         /* Simplify the background gradient shift */
         .gradient-bg {
             animation: none !important;
             background-size: auto !important;
             background-position: center !important;
         }

         /* Reduce backdrop-filter performance hit */
         .glass-card {
             backdrop-filter: blur(10px) !important;
             -webkit-backdrop-filter: blur(10px) !important;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
         }

         .dark-theme .glass-card {
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
         }

         /* Ensure custom cursors are completely disabled on mobile layout */
         .cursor-dot,
         .cursor-outline,
         .cursor-trail {
             display: none !important;
         }

         /* Allow normal scrolling and hide 3D container if it's lagging */
         .hero-3d-container {
             display: none !important;
             /* Three.js is very heavy on mobile */
         }
     }