/* ==========================================================================
           CSS VARIABLES (Light Theme Design Tokens)
           ========================================================================== */
          :root {
              --bg-color: #FAFAFA;
              --surface-color: #FFFFFF;
              --surface-glass: rgba(255, 255, 255, 0.85);

              /* Vibrant Modern Palette */
              --primary-accent: #2563EB;
              /* Royal Blue */
              --secondary-accent: #4F46E5;
              /* Indigo */
              --highlight: #0EA5E9;
              /* Sky Blue */

              --text-main: #0F172A;
              /* Slate 900 */
              --text-secondary: #475569;
              /* Slate 600 */
              --text-light: #94A3B8;
              /* Slate 400 */

              --border-color: #E2E8F0;
              --border-glass: rgba(0, 0, 0, 0.05);

              --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
              --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
              --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
              --shadow-hover: 0 20px 40px -10px rgba(37, 99, 235, 0.15);

              --radius-sm: 8px;
              --radius-md: 16px;
              --radius-lg: 24px;
              --radius-full: 9999px;

              --font-heading: 'Sora', sans-serif;
              --font-body: 'Inter', sans-serif;
              --font-code: 'JetBrains Mono', monospace;

              --transition-fast: 0.2s ease;
              --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

              --nav-height: 80px;
          }

          /* ==========================================================================
           RESET & BASE STYLES
           ========================================================================== */
          *,
          *::before,
          *::after {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
          }

          html {
              scroll-behavior: smooth;
              font-size: 16px;
          }

          body {
              background-color: var(--bg-color);
              color: var(--text-main);
              font-family: var(--font-body);
              line-height: 1.6;
              overflow-x: hidden;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
          }

          ::selection {
              background-color: var(--primary-accent);
              color: #fff;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
              font-family: var(--font-heading);
              font-weight: 700;
              line-height: 1.2;
              letter-spacing: -0.02em;
          }

          p {
              color: var(--text-secondary);
              font-size: 1.125rem;
              margin-bottom: 1.5rem;
          }

          a {
              color: inherit;
              text-decoration: none;
              transition: color var(--transition-fast);
          }

          /* ==========================================================================
           UTILITIES & LAYOUT
           ========================================================================== */
          .container {
              width: 100%;
              max-width: 1200px;
              margin: 0 auto;
              padding: 0 2rem;
          }

          .section {
              padding: 8rem 0;
              position: relative;
          }

          .section-header {
              text-align: center;
              margin-bottom: 4rem;
              max-width: 600px;
              margin-inline: auto;
          }

          .section-tag {
              font-family: var(--font-code);
              color: var(--primary-accent);
              font-size: 0.875rem;
              text-transform: uppercase;
              letter-spacing: 0.1em;
              margin-bottom: 1rem;
              display: inline-block;
              background: rgba(37, 99, 235, 0.1);
              padding: 0.25rem 1rem;
              border-radius: var(--radius-full);
          }

          .section-title {
              font-size: 2.5rem;
              margin-bottom: 1rem;
              color: var(--text-main);
          }

          .text-gradient {
              background: linear-gradient(135deg, var(--primary-accent), var(--highlight));
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
          }

          /* ==========================================================================
           COMPONENTS (Cards, Buttons)
           ========================================================================== */
          .glass-card {
              background: var(--surface-glass);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              border: 1px solid var(--border-color);
              border-radius: var(--radius-md);
              padding: 2rem;
              box-shadow: var(--shadow-sm);
              transition: var(--transition-smooth);
              position: relative;
              overflow: hidden;
          }

          .card-hover:hover {
              transform: translateY(-8px);
              box-shadow: var(--shadow-hover);
              border-color: rgba(37, 99, 235, 0.2);
          }

          .btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              padding: 1rem 2rem;
              font-size: 1rem;
              font-weight: 600;
              border-radius: var(--radius-full);
              border: none;
              cursor: pointer;
              text-decoration: none;
              transition: var(--transition-smooth);
          }

          .btn-primary {
              background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
              color: #fff;
              box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
          }

          .btn-primary:hover {
              box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
              transform: translateY(-2px);
          }

          .btn-outline {
              background: var(--surface-color);
              color: var(--text-main);
              border: 1px solid var(--border-color);
              box-shadow: var(--shadow-sm);
          }

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

          /* ==========================================================================
           LOADER & CURSOR & NAV
           ========================================================================== */
          .loader {
              position: fixed;
              inset: 0;
              background-color: var(--bg-color);
              z-index: 10000;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: opacity 0.6s ease, visibility 0.6s ease;
          }

          .loader.hidden {
              opacity: 0;
              visibility: hidden;
          }

          .spinner {
              width: 40px;
              height: 40px;
              border: 3px solid var(--border-color);
              border-top-color: var(--primary-accent);
              border-radius: 50%;
              animation: spin 1s linear infinite;
          }

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

          .cursor-glow {
              position: fixed;
              top: 0;
              left: 0;
              width: 300px;
              height: 300px;
              background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, rgba(250, 250, 250, 0) 70%);
              border-radius: 50%;
              transform: translate(-50%, -50%);
              pointer-events: none;
              z-index: 9999;
              transition: opacity 0.3s;
          }

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

          .navbar {
              position: fixed;
              top: 0;
              width: 100%;
              height: var(--nav-height);
              z-index: 100;
              display: flex;
              align-items: center;
              transition: var(--transition-smooth);
              border-bottom: 1px solid transparent;
          }

          .navbar.scrolled {
              background: rgba(255, 255, 255, 0.85);
              backdrop-filter: blur(16px);
              -webkit-backdrop-filter: blur(16px);
              border-bottom: 1px solid var(--border-color);
              box-shadow: var(--shadow-sm);
          }

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

          .logo {
              font-family: var(--font-heading);
              font-weight: 800;
              font-size: 1.5rem;
              color: var(--text-main);
          }

          .nav-links {
              display: flex;
              gap: 1.5rem;
              list-style: none;
          }

          .nav-links a {
              color: var(--text-secondary);
              font-size: 0.95rem;
              font-weight: 500;
          }

          .nav-links a:hover {
              color: var(--primary-accent);
          }

          /* ==========================================================================
           SECTION LAYOUTS
           ========================================================================== */

          /* Hero */
          .hero {
              min-height: 100vh;
              display: flex;
              align-items: center;
              position: relative;
              padding-top: var(--nav-height);
              overflow: hidden;
          }

          #hero-canvas {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 0;
              pointer-events: none;
          }

          .hero-content {
              position: relative;
              z-index: 1;
              max-width: 800px;
              text-align: center;
              margin: 0 auto;
          }

          .hero-title {
              font-size: clamp(3rem, 8vw, 5.5rem);
              line-height: 1.1;
              margin-bottom: 1.5rem;
              color: var(--text-main);
          }

          .hero-desc {
              font-size: clamp(1.1rem, 2vw, 1.25rem);
              max-width: 600px;
              margin: 0 auto 2.5rem;
              color: var(--text-secondary);
          }

          .hero-actions {
              display: flex;
              gap: 1rem;
              justify-content: center;
              flex-wrap: wrap;
          }

          /* About & Skills */
          .about-grid {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 4rem;
              align-items: center;
          }

          .about-img {
              width: 100%;
              aspect-ratio: 1;
              background: linear-gradient(135deg, var(--surface-color), var(--bg-color));
              border-radius: var(--radius-lg);
              border: 1px solid var(--border-color);
              position: relative;
              overflow: hidden;
              box-shadow: var(--shadow-md);
          }

          .skills-container {
              display: flex;
              flex-wrap: wrap;
              gap: 1rem;
              justify-content: center;
          }

          .skill-badge {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.75rem 1.5rem;
              background: var(--surface-color);
              border: 1px solid var(--border-color);
              border-radius: var(--radius-full);
              font-weight: 500;
              color: var(--text-main);
              box-shadow: var(--shadow-sm);
              transition: var(--transition-fast);
          }

          .skill-badge:hover {
              border-color: var(--primary-accent);
              color: var(--primary-accent);
              transform: translateY(-3px);
              box-shadow: var(--shadow-md);
          }

          /* Services */
          .services-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
              gap: 2rem;
          }

          .service-icon {
              width: 60px;
              height: 60px;
              border-radius: var(--radius-md);
              background: rgba(37, 99, 235, 0.1);
              color: var(--primary-accent);
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 1.5rem;
          }

          /* Portfolio Grid (Not simple cards) */
          .portfolio-grid {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
              gap: 1.5rem;
              grid-auto-rows: 300px;
          }

          .portfolio-item {
              position: relative;
              border-radius: var(--radius-md);
              overflow: hidden;
              background: var(--surface-color);
              border: 1px solid var(--border-color);
              box-shadow: var(--shadow-sm);
              cursor: pointer;
          }

          .portfolio-item svg {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .portfolio-item:hover svg {
              transform: scale(1.08);
          }

          .portfolio-overlay {
              position: absolute;
              inset: 0;
              background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 100%);
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              padding: 2rem;
              opacity: 0;
              transition: opacity 0.4s ease;
          }

          .portfolio-item:hover .portfolio-overlay {
              opacity: 1;
          }

          .portfolio-overlay h3 {
              color: #fff;
              margin-bottom: 0.5rem;
              transform: translateY(20px);
              transition: transform 0.4s ease;
          }

          .portfolio-overlay p {
              color: #CBD5E1;
              font-size: 0.9rem;
              margin: 0;
              transform: translateY(20px);
              transition: transform 0.4s ease 0.1s;
          }

          .portfolio-item:hover .portfolio-overlay h3,
          .portfolio-item:hover .portfolio-overlay p {
              transform: translateY(0);
          }

          /* Reviews */
          .reviews-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
              gap: 2rem;
          }

          .review-card {
              position: relative;
          }

          .review-quote {
              color: var(--primary-accent);
              font-size: 3rem;
              font-family: serif;
              line-height: 1;
              position: absolute;
              top: 1rem;
              right: 1.5rem;
              opacity: 0.2;
          }

          .reviewer-info {
              display: flex;
              align-items: center;
              gap: 1rem;
              margin-top: 1.5rem;
          }

          .reviewer-avatar {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background: var(--bg-color);
          }

          /* Team */
          .team-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: 2rem;
              text-align: center;
          }

          .team-member .avatar {
              width: 150px;
              height: 150px;
              border-radius: 50%;
              margin: 0 auto 1.5rem;
              background: linear-gradient(135deg, #E2E8F0, #F8FAFC);
              border: 4px solid var(--surface-color);
              box-shadow: var(--shadow-md);
              overflow: hidden;
          }

          /* Contact */
          .contact-wrapper {
              max-width: 800px;
              margin: 0 auto;
          }

          .form-control {
              width: 100%;
              padding: 1rem 1.25rem;
              margin-bottom: 1.5rem;
              background: var(--surface-color);
              border: 1px solid var(--border-color);
              border-radius: var(--radius-sm);
              color: var(--text-main);
              font-family: var(--font-body);
              font-size: 1rem;
              transition: var(--transition-fast);
              box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
          }

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

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

          /* Footer */
          .footer {
              border-top: 1px solid var(--border-color);
              padding: 3rem 0;
              text-align: center;
              background: var(--surface-color);
          }

          /* Reveal Animation */
          .reveal {
              opacity: 0;
              transform: translateY(40px);
              transition: opacity 0.8s ease, transform 0.8s ease;
          }

          .reveal.active {
              opacity: 1;
              transform: translateY(0);
          }

          /* Responsive */
          @media (max-width: 992px) {
              .about-grid {
                  grid-template-columns: 1fr;
              }
          }

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

              .section {
                  padding: 5rem 0;
              }

              .hero-title {
                  font-size: 2.5rem;
              }

              .portfolio-grid {
                  grid-template-columns: 1fr;
              }
          }