:root {
            /* Light mode colors */
            --color-bg: hsl(210, 50%, 98%);
            --color-bg-alt: hsl(210, 50%, 95%);
            --color-text-primary: hsl(210, 30%, 20%);
            --color-text-secondary: hsl(210, 20%, 40%);
            --color-accent: hsl(210, 80%, 50%);
            --color-accent-hover: hsl(210, 80%, 40%);
            --color-navbar-bg: hsl(210, 80%, 20%);
            --color-navbar-text: hsl(0, 0%, 100%);
            --color-footer-bg: hsl(210, 80%, 15%);
            --color-footer-text: hsl(0, 0%, 100%);
            --color-overlay: rgba(0, 0, 0, 0.5);
        }
        .dark {
            /* Dark mode colors */
            --color-bg: hsl(210, 30%, 10%);
            --color-bg-alt: hsl(210, 30%, 15%);
            --color-text-primary: hsl(210, 30%, 90%);
            --color-text-secondary: hsl(210, 20%, 70%);
            --color-accent: hsl(210, 80%, 60%);
            --color-accent-hover: hsl(210, 80%, 70%);
            --color-navbar-bg: hsl(210, 80%, 10%);
            --color-navbar-text: hsl(0, 0%, 100%);
            --color-footer-bg: hsl(210, 80%, 8%);
            --color-footer-text: hsl(0, 0%, 100%);
            --color-overlay: rgba(0, 0, 0, 0.7);
        }

        body {
            background-color: var(--color-bg);
            color: var(--color-text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        nav {
            background-color: var(--color-navbar-bg);
            color: var(--color-navbar-text);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        footer {
            background-color: var(--color-footer-bg);
            color: var(--color-footer-text);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .hero-overlay {
            background: var(--color-overlay);
        }

        .service-card {
            background-color: var(--color-bg-alt);
            color: var(--color-text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .service-card:hover {
            background-color: var(--color-accent);
            color: var(--color-navbar-text);
        }

        .testimonial-card {
            background-color: var(--color-bg-alt);
            color: var(--color-text-primary);
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
        }

        .testimonial-card:hover {
            transform: scale(1.02);
        }

        #themeToggleBtn {
            position: absolute;
            top: 1rem;
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            background-color: var(--color-bg-alt);
            color: var(--color-text-primary);
            border: none;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        #themeToggleBtn:hover,
        #themeToggleBtn:focus {
            background-color: var(--color-accent);
            color: var(--color-navbar-text);
            outline: none;
        }

        /* Smooth transition for theme changes */
        .transition-theme {
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        /* Fade and scale in/out animation */
        .section-animate {
          opacity: 0;
          transform: scale(0.96) translateY(40px);
          transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
          will-change: opacity, transform;
        }
        .section-animate.in-view {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
        
        /* Zigzag underline effect for navbar links */
        .nav-zigzag {
          position: relative;
          display: inline-block;
          overflow: visible;
        }

        .nav-zigzag::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -4px;
          height: 1px;
          background: none;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.2s;
          z-index: 1;
        }

        .nav-zigzag:hover::after,
        .nav-zigzag:focus::after {
          opacity: 1;
          background: repeating-linear-gradient(
            -45deg,
            #3b82f6 0 3px,
            #a21caf 3px 6px,
            #f59e42 6px 9px,
            #3b82f6 9px 12px
          );
          background-size: 12px 8px;
          animation: zigzag-move 0.7s linear infinite;
        }

        @keyframes zigzag-move {
          0% { background-position-x: 0; }
          100% { background-position-x: 16px; }
        }