h5.card-title {
			margin-top: 30px;
		}
		.p-20{
			padding: 120px 0px 120px 0px;
		}
		.bg-color-row-1{
			background-color: #f0f8ff;
		}
		.bg-color-row-2{
			background-color: #f9f9ff;
		}
		#lms-benefits img{
			border: 10px solid rgb(218, 218, 218);
		}
		a.btn-signup{
			background-color: rgb(164, 225, 255);
			color: rgb(69, 100, 184);
			text-shadow: 1px 0px rgb(133, 167, 196);
		}
		.feature-icon{
			width: 60px;
		}
	
			h1 .line{
				font-weight: 400;
				display: inline-block;
				
			}
			h1 .line1{
				font-size: 42px;
				font-family: "Open Sans", sans-serif;
			  font-optical-sizing: auto;
			  font-weight: 800;
			  font-style: normal;
			  font-variation-settings: "wdth" 100;
			}
			h1 .line2{
				font-size: 32px;
				color: #4a5158;
				margin-top: 10px;
			}
			h1 .line3{
				font-size: 32px;
				color: rgb(44 64 157);
				margin-top: 10px;
			}
			h1 .line4{
				font-size: 24px;
				color: #1d5995;
				margin-top: 10px;
			}
			#crm-tools .content-block-body h5{
				font-weight: 800;
				font-size: 24px;
			}
			#crm-tools .content-block-body{
				margin-top: 90px;
				margin-bottom: 90px;
			}
			#crm-tools img{
				/*
				border: 10px solid #ddd;
				-webkit-box-shadow: 3px 6px 16px -4px rgba(0,0,0,0.75);
				-moz-box-shadow: 3px 6px 16px -4px rgba(0,0,0,0.75);
				box-shadow: 3px 6px 16px -4px rgba(0,0,0,0.75);
				*/
			}
			.best-star{
				height: 150px;width:auto;
			}
			.bg-business-cta{
				margin-top: 60px !important;
				margin-bottom: 60px;
				padding: 60px;
				background: #e6fcfb;
				border-radius: 10px;
			}
			.cta-feature-row {
				margin-top: 30px;
			}
			.cta-feature-row a{
				color: black;
				text-decoration: none;
				font-weight: 200;
			}
			.email-input {
		      border: 2px solid #007bff;
		      border-radius: 5px;
		    }
		    .email-input input[type="email"] {
		      border: none;
		      outline: none;
		      box-shadow: none;
		    }
			#img-key-features{
				position: relative;
				bottom:0px;
				width: 100%;
				height: auto;
			}
			#key-features h5.card-title{
				margin-top: 0px;
			}
			#pflist-header{
				/* background-color: rgb(15, 87, 150); */
				background-color: white;
				color: white;
			}
			#pflist-header h4{
				font-size: large;
				background-color: aliceblue;
				color: black;
				padding: 10px;
				border-radius: 5px;
			}
			#pflist .col-6{
				background-color: #fafbfb;
				color: #495057;
				font-weight: 500;
			}
			.pricing-details .card-top-features{
				padding-bottom: inherit;
			}
			/*
			.table-pricing-feature{
				border: 10px solid rgb(230, 230, 230);
				box-shadow: -1px 3px 11px 3px rgb(145, 145, 145);
			}
			*/
			.card-top-features .card-body{
				text-align: center;
			}
			ul.crm-price-features-list{
			    font-size: 16px;
				color: #17356b;
				font-weight: 500;
			}
			ul.ts-price-features-list{
			    font-size: 14px;
				color: #444444;
				font-weight: 200;
			}
			#pflist .row:hover{
				background-color: rgba(237, 237, 237, 0.89);
			}
			#pflist .row.mt-1{
				margin-top: 0px !important;
			}
			.heading-container .row{
				padding: 0px;
			}
			.unlimited{
				font-size: 18px;
				color: #035276;
			}
			.training-video{
				    text-decoration: underline;
					font-size: small;
			}
			.li-fe-name{
				font-weight: 400 !important;
				background-color: rgba(249, 249, 249, 0.95);
				font-family: sans-serif;
			}
			.small{
				font-weight: normal;
				font-size: small;
			}
			#lead-management-features{
			  position: relative;
			  overflow: hidden;
			  background: #ffffff;
			}
			
			#lead-management-features::before{
			  content:"";
			  position:absolute;
			  inset:0;
			  pointer-events:none;
			  opacity:.22;
			
			  /* square grid using linear-gradients */
			  background-image:
			    linear-gradient(rgba(15,23,42,.18) 1px, transparent 1px),
			    linear-gradient(90deg, rgba(15,23,42,.18) 1px, transparent 1px);
			  background-size: 18px 18px;
			  background-position: 0 0;
			
			  /* vignette fade */
			  mask-image: radial-gradient(circle at 40% 20%, #000 0%, #000 45%, transparent 75%);
			  -webkit-mask-image: radial-gradient(circle at 40% 20%, #000 0%, #000 45%, transparent 75%);
			}
			
			#lead-management-features > *{
			  position: relative;
			  z-index: 1;
			}

			#lead-management-features .card{
				min-height: 380px;
			    border-radius: 20px;
			    border: 1px dotted #6c757d;
			}
			@media only screen and (max-width: 767px) {
				#crm-tools .content-block-body{
					margin-top: 50px;
					margin-bottom: 50px;
				}
				.best-star{
					height: 90px;width:auto;
				}
				.cta-feature-row .card{
					margin-top: 5px;
				}
			}
	

        :root {
            --primary: #4F46E5; /* Modern Indigo */
            --primary-dark: #4338ca;
            --secondary: #0ea5e9; /* Sky Blue */
            --dark: #0f172a;
            --light: #f8fafc;
            --text-gray: #64748b;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--dark);
            overflow-x: hidden;
        }

        
        /* Hero Section */
        .hero-section {
            padding: 160px 0 100px; /* Account for fixed navbar */
            background: radial-gradient(circle at top right, #eef2ff 0%, #ffffff 40%);
            position: relative;
            overflow: hidden;
        }

        /* Background Decor elements */
        .blob {
            position: absolute;
            width: 500px;
            height: 500px;
            background: linear-gradient(180deg, rgba(79, 70, 229, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
            animation: float-blob 10s infinite alternate;
        }
        
        .blob-1 { top: -100px; right: -150px; }
        .blob-2 { bottom: -100px; left: -150px; width: 300px; height: 300px; }

        @keyframes float-blob {
            0% { transform: translate(0, 0); }
            100% { transform: translate(20px, 40px); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        /* Badge */
        .trust-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #e0e7ff;
            color: var(--primary);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 24px;
            border: 1px solid rgba(79, 70, 229, 0.1);
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            background: linear-gradient(to right, #1e293b, #4F46E5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-gray);
            line-height: 1.6;
            margin-bottom: 40px;
            max-width: 540px;
        }

        /* Buttons */
        .btn-cta {
            padding: 14px 32px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-primary-custom {
            background: var(--primary);
            color: white;
            border: 2px solid var(--primary);
            box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
        }

        .btn-primary-custom:hover {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 15px 30px -5px rgba(79, 70, 229, 0.5);
            color: white;
        }

        .btn-outline-custom {
            background: transparent;
            color: var(--dark);
            border: 2px solid #e2e8f0;
        }

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

        /* Checkmarks */
        .feature-checks {
            display: flex;
            gap: 24px;
            margin-top: 32px;
            font-size: 0.9rem;
            color: var(--text-gray);
            font-weight: 500;
        }
        
        .feature-checks i {
            color: #10b981;
            margin-right: 6px;
        }

        /* Hero Image Area */
        .hero-image-wrapper {
            position: relative;
            padding: 20px;
        }

        .main-dashboard-img {
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
            border: 4px solid rgba(255, 255, 255, 0.8);
            width: 100%;
            transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
            transition: transform 0.5s ease;
        }

        .hero-image-wrapper:hover .main-dashboard-img {
            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        }

        /* Floating Cards */
        .floating-card {
            position: absolute;
            background: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            animation: float-card 6s ease-in-out infinite;
            z-index: 3;
            max-width: 200px;
        }

        .card-1 {
            top: 40px;
            left: -20px;
            animation-delay: 0s;
        }

        .card-2 {
            bottom: 40px;
            right: -20px;
            animation-delay: 2s;
        }

        .icon-box {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        @keyframes float-card {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

		/* Marketing Section Styles */
        .marketing-section {
            padding: 100px 0;
            background-color: #fff;
            position: relative;
        }
        
        .section-tag {
            color: var(--primary);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 1px;
            margin-bottom: 12px;
            display: block;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }
        
        .section-desc {
            font-size: 1.125rem;
            color: var(--text-gray);
            line-height: 1.7;
            margin-bottom: 2rem;
        }
        
        /* Interactive List */
        .feature-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .feature-item {
            display: flex;
            align-items: flex-start;
            padding: 1rem;
            border-radius: 12px;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        
        .feature-item:hover {
            background-color: #f8fafc;
            border-color: #e2e8f0;
            transform: translateX(10px);
        }
        
        .feature-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            margin-top: 2px;
        }
        
        .feature-text {
            font-weight: 500;
            color: var(--dark);
            font-size: 1.05rem;
        }

        .feature-text small {
            display: block;
            color: var(--text-gray);
            font-weight: 400;
            font-size: 0.9rem;
            margin-top: 4px;
        }
        
        .marketing-img-container {
            position: relative;
            padding: 20px;
        }
        
        .marketing-img {
            border-radius: 20px;
            width: 100%;
            height: auto;
            object-fit: cover;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .img-decoration {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            border: 2px dashed #cbd5e1;
            border-radius: 20px;
            top: 40px;
            left: -20px;
        }
        
        /* --- NEW AUTOMATION SECTION STYLES --- */
        .automation-section {
            background-color: #f8fafc;
            padding: 100px 0;
        }

        /* Process Flow Cards (Top 4) */
        .process-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            height: 100%;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .process-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            border-color: rgba(79, 70, 229, 0.2);
        }

        .process-number {
            font-size: 4rem;
            font-weight: 800;
            color: rgba(79, 70, 229, 0.05);
            position: absolute;
            top: 0;
            right: 10px;
            line-height: 1;
            z-index: -1;
            transition: all 0.3s;
        }

        .process-card:hover .process-number {
            color: rgba(79, 70, 229, 0.1);
            transform: scale(1.1);
        }

        .process-icon-circle {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
            margin-bottom: 1.5rem;
        }

        /* Grid Features (Bottom 6) */
        .feature-grid-card {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            height: 100%;
        }

        .feature-grid-card:hover {
            border-color: var(--primary);
            box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.15);
            background: linear-gradient(to bottom right, #ffffff, #f5f7ff);
        }

        .feature-grid-icon {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 1rem;
            display: inline-block;
            padding: 10px;
            background: rgba(79, 70, 229, 0.1);
            border-radius: 10px;
            transition: all 0.3s;
        }

        .feature-grid-card:hover .feature-grid-icon {
            background: var(--primary);
            color: white;
            transform: rotateY(180deg);
        }

        .grid-title {
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 0.75rem;
        }

        .grid-desc {
            color: var(--text-gray);
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        .grid-desc a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
        }

        /* Animation Classes */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        
        .reveal-on-scroll.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* --- BENEFITS SECTION STYLES (Dark Theme) --- */
        .benefits-section {
            background-color: var(--dark);
            color: white;
            padding: 100px 0;
            position: relative;
        }

        .benefit-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 2.5rem;
            height: 100%;
            transition: all 0.3s ease;
        }

        .benefit-card:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .benefit-icon-wrapper {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
            background: rgba(255, 255, 255, 0.1);
        }

        .benefit-card:hover .benefit-icon-wrapper {
            background: white;
        }
        
        
        /* --- SUCCESS SECTION (CRM Tools) STYLES --- */
        .success-section {
            padding: 120px 0;
            background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
            position: relative;
        }

        .znicrm-logo-text {
            font-weight: 800;
            color: var(--dark);
        }
        .znicrm-logo-text span {
            color: var(--primary);
        }

        .success-row {
            margin-bottom: 6rem;
        }

        .success-row:last-child {
            margin-bottom: 0;
        }

        .success-img-wrapper {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 4px solid white;
        }

        .success-img-wrapper:hover {
            transform: scale(1.02);
        }

        .success-img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
        }

        .success-content {
            padding: 20px;
        }

        .success-content h3 {
            font-weight: 700;
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
            background: linear-gradient(to right, var(--dark), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .custom-check-list {
            list-style: none;
            padding-left: 0;
            margin-top: 20px;
        }

        .custom-check-list li {
            position: relative;
            padding-left: 40px;
            margin-bottom: 16px;
            font-size: 1.05rem;
            color: var(--text-gray);
            line-height: 1.6;
        }

        .custom-check-list li::before {
            content: '\f00c'; /* FontAwesome check */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 2px;
            width: 24px;
            height: 24px;
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }
        
        /* Animation Classes */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        
        .reveal-on-scroll.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        
        /* Mobile Responsive */
        @media (max-width: 991px) {
            .hero-section { padding-top: 120px; text-align: center; }
            .hero-title { font-size: 2.5rem; }
            .hero-subtitle { margin: 0 auto 30px; }
            .feature-checks { justify-content: center; flex-wrap: wrap; gap: 15px; }
            .hero-image-wrapper { margin-top: 60px; }
            .main-dashboard-img { transform: none; }
            .floating-card { display: none; }
            .btn-group { flex-direction: column; width: 100%; gap: 15px; }
            .btn-cta { width: 100%; }
            
            marketing-section { text-align: center; padding: 60px 0; }
            .feature-item { text-align: left; }
            .marketing-img-container { margin-bottom: 40px; }
            .img-decoration { display: none; }
            
            .automation-section { padding: 60px 0; }
            .benefits-section { padding: 60px 0; }
            .success-section { padding: 60px 0; }
            .success-row { margin-bottom: 4rem; }
            .success-row:nth-child(even) .row {
                flex-direction: column-reverse;
            }
            .success-img-wrapper { margin-bottom: 30px; }
        }
   
        /* Scoped Styles: All styles are strictly encapsulated within .cta-wrapper */
        
        .cta-wrapper {
            /* Apply font family only to this section */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
            /* Optional: Ensure it has a transparent or specific bg if needed, 
               currently inherits from parent */
        }

        /* Main Card Styling - Scoped */
        .cta-wrapper .cta-card {
            /* Fallback color + Gradient Overlay */
            background: linear-gradient(135deg, #00499c 0%, #003370 100%); 
            /* If you have the bg-business-love image, un-comment the line below */
            /* background: linear-gradient(135deg, rgba(0, 73, 156, 0.9), rgba(0, 51, 112, 0.95)), url('path/to/bg-business-love.jpg'); */
            
            background-size: cover;
            background-position: center;
            border-radius: 20px;
            color: white;
            padding: 60px 40px;
            box-shadow: 0 20px 50px rgba(0, 73, 156, 0.25);
            position: relative;
            z-index: 1;
        }

        /* Decorative Circles - Scoped */
        .cta-wrapper .cta-card::before, 
        .cta-wrapper .cta-card::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            z-index: -1;
        }

        .cta-wrapper .cta-card::before {
            width: 300px;
            height: 300px;
            top: -100px;
            right: -50px;
        }

        .cta-wrapper .cta-card::after {
            width: 200px;
            height: 200px;
            bottom: -50px;
            left: -50px;
        }

        /* Typography - Scoped */
        .cta-wrapper .cta-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: white; /* Ensure text is white regardless of parent css */
        }

        .cta-wrapper .cta-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            font-weight: 300;
            color: white;
        }

        /* Trust Badge - Scoped */
        .cta-wrapper .trust-badge {
            background: rgba(255, 255, 255, 0.1);
            display: inline-block;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.9rem;
            margin-bottom: 20px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
        }

        .cta-wrapper .count-number {
            font-weight: 800;
            color: #ffd700; /* Gold */
        }

        /* Button Styling - Scoped */
        .cta-wrapper .btn-cta {
            background-color: #ff4757; /* A modern "danger" red */
            color: white;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            border: none;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(255, 71, 87, 0.3);
            text-decoration: none;
            display: inline-block;
        }

        .cta-wrapper .btn-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(255, 71, 87, 0.4);
            background-color: #ff6b81;
            color: white;
        }

        .cta-wrapper .guarantee-text {
            margin-top: 15px;
            font-size: 0.85rem;
            opacity: 0.8;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            color: white;
        }
        
        .cta-wrapper .guarantee-item i {
            color: #4cd137; /* Green checkmark */
            margin-right: 5px;
        }
   
	  /* ----- Arrow overlap FIX: create internal side gutters for arrows ----- */
	  .zn-card-slider{
	    position: relative;
	  }
	
	  /* Reserve side space so arrows never sit on top of text */
	  .zn-card-viewport{
	    position: relative;
	    overflow: hidden;
	    border-radius: 18px;
	    padding: 0 78px; /* <-- reserved gutters for arrows (desktop) */
	  }
	
	  /* Slides */
	  /* viewport must be relative so absolute slides can stack */
	.zn-card-viewport{
	  position: relative;
	  overflow: hidden;
	  border-radius: 18px;
	  padding: 0 78px; /* keep your arrow gutters */
	}
	
	/* all slides remain in DOM and "present", but visually hidden */
	.zn-card-slide{
	  padding: 6px 0;
	
	  /* stack slides on top of each other */
	  position: absolute;
	  inset: 0;
	
	  /* hidden state */
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	
	  /* subtle motion */
	  transform: translateY(10px);
	  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	}
	
	.zn-card-viewport{
	  transition: height .25s ease;
	}
	/* active slide becomes visible and takes normal flow height */
	.zn-card-slide.is-active{
	  position: relative;
	  inset: auto;
	
	  opacity: 1;
	  visibility: visible;
	  pointer-events: auto;
	
	  transform: translateY(0);
	}
	
	  @keyframes znFade{
	    from{ opacity: .2; transform: translateY(6px); }
	    to{ opacity: 1; transform: translateY(0); }
	  }
	
	  /* Arrows positioned inside the reserved gutters */
	  .zn-nav{
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    width: 54px;
	    height: 54px;
	    border-radius: 999px;
	    border: 1px solid rgba(0,0,0,.08);
	    background: rgba(255,255,255,.92);
	    box-shadow: 0 10px 26px rgba(0,0,0,.10);
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    z-index: 5;
	    cursor:pointer;
	    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	  }
	  .zn-nav i{ font-size: 18px; }
	  .zn-nav:hover{
	    background: #fff;
	    box-shadow: 0 14px 30px rgba(0,0,0,.14);
	    transform: translateY(-50%) scale(1.04);
	  }
	
	  /* Place arrows aligned to viewport padding */
	  .zn-prev{ left: 18px; }
	  .zn-next{ right: 18px; }
	
	  /* Responsive: smaller gutters/arrows on mobile */
	  @media (max-width: 575.98px){
	    .zn-card-viewport{ padding: 0 56px; }
	    .zn-nav{ width: 46px; height: 46px; }
	    .zn-prev{ left: 10px; }
	    .zn-next{ right: 10px; }
	  }
	
	  /* Optional dots */
	  .zn-dots{
	    display:flex;
	    gap:10px;
	    margin-top: 18px;
	    padding-left: 2px;
	  }
	  .zn-dot{
	    width: 10px;
	    height: 10px;
	    border-radius: 999px;
	    background: rgba(0,0,0,.18);
	    cursor: pointer;
	    transition: transform .15s ease, background .15s ease;
	  }
	  .zn-dot.is-active{
	    background: rgba(0,0,0,.55);
	    transform: scale(1.15);
	  }
	
	  /* SEO snippet: visible but minimal, not a text wall */
	  .zn-seo-snippet{
	    margin-top: 18px;
	    padding: 14px 16px;
	    border-radius: 14px;
	    background: rgba(0,0,0,.03);
	    border: 1px dashed rgba(0,0,0,.12);
	  }
	  .zn-seo-title{
	    font-size: 14px;
	    margin: 0 0 6px 0;
	    font-weight: 700;
	    letter-spacing: .2px;
	    opacity: .9;
	  }
	  .zn-seo-text{
	    margin: 0;
	    font-size: 14px;
	    line-height: 1.55;
	    opacity: .85;
	  }
	  /* Per-card definition block (visible, compact, SEO-friendly) */
	.zn-card-definition{
	  margin-top: 18px;
	  padding: 14px 16px;
	  border-radius: 14px;
	  background: rgba(0,0,0,.03);
	  border: 1px dashed rgba(0,0,0,.12);
	}
	
	.zn-def-title{
	  font-size: 13px;
	  margin: 0 0 6px 0;
	  font-weight: 700;
	  letter-spacing: .2px;
	  opacity: .9;
	}
	
	.zn-def-text{
	  margin: 0;
	  font-size: 14px;
	  line-height: 1.55;
	  opacity: .85;
	}