/* ============================================================
               CUSTOM STYLES
               ============================================================ */

        /* ---------- Scroll reveal base ---------- */
        .reveal {
            opacity: 0;
            transform: translateY(40px) scale(0.96);
            transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

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

        /* ---------- Stagger children ---------- */
        .stagger-children>* {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .stagger-children.visible>*:nth-child(1) {
            transition-delay: 0.05s;
        }
        .stagger-children.visible>*:nth-child(2) {
            transition-delay: 0.12s;
        }
        .stagger-children.visible>*:nth-child(3) {
            transition-delay: 0.19s;
        }
        .stagger-children.visible>*:nth-child(4) {
            transition-delay: 0.26s;
        }
        .stagger-children.visible>*:nth-child(5) {
            transition-delay: 0.33s;
        }
        .stagger-children.visible>*:nth-child(6) {
            transition-delay: 0.40s;
        }

        .stagger-children.visible>* {
            opacity: 1;
            transform: translateY(0);
        }

        /* ---------- Gradient text ---------- */
        .gradient-effect h2 {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
        }

        /* ---------- Service card ---------- */
        .service-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease,
                background 0.3s ease;
            will-change: transform;
        }

        .service-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
                0 8px 24px -6px rgba(79, 70, 229, 0.08);
            border-color: rgba(79, 70, 229, 0.15);
            background: rgba(255, 255, 255, 0.95);
        }

        .service-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                background 0.3s ease,
                color 0.3s ease;
        }

        .service-card:hover .service-icon {
            transform: scale(1.12) rotate(-4deg);
            box-shadow: 0 8px 24px -6px rgba(79, 70, 229, 0.25);
        }

        /* Individual icon hover colours */
        .service-card:hover .service-icon.bg-blue-100 {
            background: #2563eb;
            color: #fff;
        }
        .service-card:hover .service-icon.bg-green-100 {
            background: #059669;
            color: #fff;
        }
        .service-card:hover .service-icon.bg-purple-100 {
            background: #7c3aed;
            color: #fff;
        }
        .service-card:hover .service-icon.bg-amber-100 {
            background: #d97706;
            color: #fff;
        }
        .service-card:hover .service-icon.bg-rose-100 {
            background: #e11d48;
            color: #fff;
        }
        .service-card:hover .service-icon.bg-cyan-100 {
            background: #0891b2;
            color: #fff;
        }

        /* Decorative underline */
        .card-underline {
            width: 32px;
            height: 3px;
            border-radius: 4px;
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            margin: 0.5rem auto 0.75rem;
            transition: width 0.4s ease, opacity 0.3s ease;
            opacity: 0.5;
        }

        .service-card:hover .card-underline {
            width: 48px;
            opacity: 1;
        }

        /* ---------- CTA button ---------- */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                background 0.4s ease;
            box-shadow: 0 8px 24px -8px rgba(79, 70, 229, 0.35);
            position: relative;
            overflow: hidden;
            border: none;
            cursor: pointer;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #4338ca, #6d28d9);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 16px 36px -10px rgba(79, 70, 229, 0.45);
        }

        .btn-primary:hover::before {
            opacity: 1;
        }

        .btn-primary span,
        .btn-primary i {
            position: relative;
            z-index: 1;
        }

        .btn-primary i {
            transition: transform 0.3s ease;
        }

        .btn-primary:hover i {
            transform: translateX(4px);
        }

        /* ---------- Form styling ---------- */
        .form-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: box-shadow 0.4s ease, border-color 0.3s ease;
        }

        .form-card:hover {
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
            border-color: rgba(79, 70, 229, 0.15);
        }

        .input-field {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 0.75rem;
            background: rgba(255, 255, 255, 0.9);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            font-size: 1rem;
            outline: none;
        }

        .input-field:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
        }

        .input-field:hover {
            border-color: #a5b4fc;
        }

        .form-label {
            display: block;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
            transition: color 0.3s ease;
        }

        .form-group:focus-within .form-label {
            color: #4f46e5;
        }

        .checkbox-custom {
            width: 1.2rem;
            height: 1.2rem;
            accent-color: #4f46e5;
            border-radius: 0.25rem;
            transition: transform 0.2s ease;
        }

        .checkbox-custom:hover {
            transform: scale(1.1);
        }

        /* ---------- Responsive tweaks ---------- */
        @media (max-width: 640px) {
            .service-icon {
                width: 60px;
                height: 60px;
                font-size: 1.4rem;
            }
            .service-card {
                padding: 1.5rem 1rem;
            }
        }