/* Hero Section Background Pattern */
        .hero-bg-v3 {
            background-image: radial-gradient(circle at 15% 85%, hsl(var(--accent-color-1) / 0.08) 0%, transparent 40%),
                radial-gradient(circle at 85% 15%, hsl(var(--accent-color-2) / 0.08) 0%, transparent 40%),
                linear-gradient(to bottom, hsl(var(--bg-primary)), hsl(var(--bg-primary) / 0.9));
            background-size: cover;
            position: relative;
            overflow: hidden;
        }

        .hero-bg-v3::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, hsl(var(--bg-primary)) 95%);
            z-index: 1;
        }

        /* Card Styling for general cards (v3) */
        .card-v3 {
            border: 1px solid hsl(var(--border-color));
            background-color: hsl(var(--card-bg));
            border-radius: var(--radius-lg);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            /* Darker shadow for dark theme */
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .card-v3::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%), hsl(var(--accent-color-1) / 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .card-v3:hover::before {
            opacity: 1;
        }

        .card-v3:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
            /* Darker shadow on hover */
            border-color: hsl(var(--accent-color-1));
        }

        /* Animations for general sections */
        .animate-fadeInScale {
            animation: fadeInScale 0.9s ease-out forwards;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(20px);
            }

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

        /* Delay utilities for general sections */
        .delay-100 {
            animation-delay: 0.1s;
        }

        .delay-200 {
            animation-delay: 0.2s;
        }

        .delay-300 {
            animation-delay: 0.3s;
        }

        .delay-400 {
            animation-delay: 0.4s;
        }

        .delay-500 {
            animation-delay: 0.5s;
        }

        .delay-600 {
            animation-delay: 0.6s;
        }

        .delay-700 {
            animation-delay: 0.7s;
        }

        .delay-800 {
            animation-delay: 0.8s;
        }

        .delay-900 {
            animation-delay: 0.9s;
        }

        .delay-1000 {
            animation-delay: 1s;
        }

        /* How It Works Section (v3) - NEW DESIGN (reused for Features page) */
        .steps-section-v3 {
            position: relative;
            padding-top: 5rem;
            padding-bottom: 5rem;
            min-height: 800px;
            overflow: hidden;
        }

        .timeline-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            max-width: 900px;
            margin: 0 auto;
            padding: 2rem 0;
        }

        .timeline-line-v3 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%) scaleY(0);
            width: 4px;
            background: linear-gradient(to bottom, hsl(var(--accent-color-1)), hsl(var(--accent-color-2)));
            height: 100%;
            top: 0;
            z-index: 0;
            transform-origin: top;
            transition: transform 2.2s ease-out;
        }

        .timeline-line-v3.is-visible {
            transform: translateX(-50%) scaleY(1);
        }

        .timeline-step-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            padding: 2rem 0;
            justify-content: center;
        }

        @media (min-width: 768px) {
            .timeline-step-wrapper:nth-child(odd) {
                justify-content: flex-start;
            }

            .timeline-step-wrapper:nth-child(even) {
                justify-content: flex-end;
            }

            .timeline-step-wrapper:nth-child(odd) .step-item-v3 {
                margin-right: calc(50% + 2rem);
            }

            .timeline-step-wrapper:nth-child(even) .step-item-v3 {
                margin-left: calc(50% + 2rem);
            }
        }

        .step-item-v3 {
            position: relative;
            padding: 2.5rem;
            border-radius: var(--radius-xl);
            background-color: hsl(var(--card-bg));
            border: 1px solid hsl(var(--border-color));
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 0;
            transform: translateY(60px) scale(0.98);
            text-align: center;
            z-index: 1;
            max-width: 450px;
            width: 90%;
        }

        .step-item-v3.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .step-item-v3:hover {
            transform: translateY(-12px) scale(1.03);
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
            border-color: hsl(var(--accent-color-1));
        }

        .step-number-v3 {
            font-size: 4rem;
            font-weight: 900;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, hsl(var(--accent-color-1)), hsl(var(--accent-color-2)));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
            filter: drop-shadow(0 0 5px hsl(var(--accent-color-1) / 0.3));
        }

        .timeline-dot-v3 {
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: hsl(var(--accent-color-1));
            border-radius: 50%;
            border: 4px solid hsl(var(--bg-primary));
            z-index: 2;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 0 6px hsl(var(--bg-primary)), 0 0 15px hsl(var(--accent-color-1) / 0.6);
            animation: dotPulse 2s infinite ease-in-out;
        }

        @media (min-width: 768px) {
            .timeline-step-wrapper .timeline-dot-v3 {
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        /* SVG Animation Specific Styles */
        .device-svg {
            width: 100%;
            height: 100%;
            max-width: 800px;
            /* Max width for the SVG container */
            margin: 0 auto;
            display: block;
            filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
        }

        .device-outline {
            stroke: hsl(var(--border-color));
            stroke-width: 2;
            fill: hsl(var(--card-bg));
            transition: all 0.3s ease-in-out;
        }

        .device-screen {
            fill: hsl(var(--bg-primary));
            stroke: hsl(var(--border-color));
            stroke-width: 1;
        }

        .data-flow-line {
            stroke: url(#gradientFlow);
            /* Use a gradient for the flow */
            stroke-width: 3;
            fill: none;
            stroke-dasharray: 1000;
            /* Long dash for animation */
            stroke-dashoffset: 1000;
            /* Start off-screen */
            animation: dash 5s linear infinite;
            opacity: 0.7;
        }

        .data-flow-dot {
            fill: hsl(var(--accent-color-1));
            animation: pulseDot 2s infinite ease-in-out;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }

        @keyframes pulseDot {
            0% {
                transform: scale(0.8);
                opacity: 0.5;
            }

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

            100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
        }