/* ==================== PAYROLL PAGE STYLES ==================== */

 /* Hero Section */
 /* ==================== PAYROLL HERO SECTION ==================== */
 .payroll-hero {
     padding: 120px 0 100px;
     background: var(--bg-surface);
     /* Or var(--bg-surface) */
     position: relative;
     overflow: hidden;
 }

 /* --- Layout --- */
 .hero-content-payroll {
     display: grid;
     grid-template-columns: 1fr 1.1fr;
     /* Visual gets slightly more space */
     gap: 4rem;
     align-items: center;
     position: relative;
     z-index: 2;
 }

 /* --- Text Side Styling (Your Original Styles Preserved) --- */
 .hero-text h1 {
     font-size: 3.5rem;
     font-weight: 900;
     margin-bottom: 1.5rem;
     line-height: 1.2;
     background: var(--gradient-hero);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     letter-spacing: -1px;
 }

 .hero-text p {
     font-size: 1.25rem;
     color: var(--text-secondary);
     margin-bottom: 2.5rem;
     line-height: 1.7;
     max-width: 90%;
 }

 /* Buttons */
 .cta-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .btn-large {
     padding: 1rem 2.5rem;
     font-size: 1.05rem;
     font-weight: 600;
     border-radius: 50px;
     /* Modern rounded pill shape */
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s ease;
 }

 .btn-primary {
     background: var(--gradient-primary);
     color: white;
     box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 20px 30px -10px rgba(118, 75, 162, 0.6);
 }

 .btn-outline {
     background: transparent;
     color: var(--text-primary);
     border: 2px solid var(--border);
 }

 .btn-outline:hover {
     border-color: #764ba2;
     color: #764ba2;
     transform: translateY(-3px);
 }

 /* --- VISUAL SIDE: The Layered/Floating Images --- */

 .hero-visual {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Background decorative blob behind the images */
 .hero-visual::before {
     content: '';
     position: absolute;
     width: 140%;
     height: 140%;
     background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
     z-index: 0;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
 }

 .hero-layers-container {
     position: relative;
     width: 100%;
     max-width: 700px;
     height: 500px;
     /* Fixed height to allow absolute positioning */
     z-index: 1;
 }

 .hero-layer {
     position: absolute;
     border-radius: 24px;
     /* box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
         0 18px 36px -18px rgba(0, 0, 0, 0.3),
         0 0 0 1px rgba(255, 255, 255, 0.1); */
     /* Subtle border */
     transition: transform 0.5s ease;
     /* background: white; */
 }

 /* 1. Main Dashboard Image */
 .hero-layer-main {
     width: 90%;
     top: 5%;
     right: 0;
     z-index: 2;
     animation: heroFloatMain 6s ease-in-out infinite;
 }

 /* 2. Floating Card 1 (e.g., Payment Success) - Bottom Left */
 .hero-layer-card1 {
     width: 40%;
     bottom: 40px;
     left: -20px;
     z-index: 3;
     animation: heroFloatCard1 5s ease-in-out infinite;
     /* border: 4px solid #ffffff; */
     /* White border for cutout effect */
 }

 /* 3. Floating Card 2 (e.g., User Profile) - Top Right */
 .hero-layer-card2 {
     width: 25%;
     top: -30px;
     right: 10%;
     z-index: 4;
     animation: heroFloatCard2 7s ease-in-out infinite;
     /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); */
 }


 /* --- ANIMATIONS --- */

 @keyframes heroFloatMain {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes heroFloatCard1 {

     0%,
     100% {
         transform: translateY(0px) translateX(0px);
     }

     50% {
         transform: translateY(-20px) translateX(10px);
     }
 }

 @keyframes heroFloatCard2 {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(15px);
     }
 }

 /* Hover Effect: Pause animation and lift slightly */
 .hero-layers-container:hover .hero-layer {
     animation-play-state: paused;
 }

 .hero-layers-container:hover .hero-layer-main {
     transform: scale(1.02);
 }


 /* --- RESPONSIVE DESIGN --- */

 @media (max-width: 992px) {
     .payroll-hero {
         padding: 80px 0;
     }

     .hero-content-payroll {
         grid-template-columns: 1fr;
         /* Stack vertically */
         text-align: center;
         gap: 60px;
     }

     .hero-text h1 {
         font-size: 2.8rem;
     }

     .hero-text p {
         margin: 0 auto 2.5rem;
     }

     .cta-buttons {
         justify-content: center;
     }

     /* Adjust layers for tablet/mobile */
     .hero-layers-container {
         height: 400px;
         /* Reduce height */
         margin: 0 auto;
     }

     .hero-layer-main {
         width: 100%;
         right: auto;
         left: 0;
     }

     .hero-layer-card1 {
         width: 35%;
         left: 0;
         bottom: 20px;
     }

     .hero-layer-card2 {
         right: 0;
         top: -10px;
     }
 }

 @media (max-width: 600px) {
     .hero-text h1 {
         font-size: 2.2rem;
     }

     .hero-layers-container {
         height: auto;
         /* Let it flow naturally */
         min-height: 250px;
         margin-bottom: 20px;
     }

     .hero-layer-main {
         position: relative;
         /* Stop absolute positioning for main image on mobile */
         width: 100%;
         animation: none;
         /* Disable animation for performance/layout stability */
     }

     /* Keep one floating card on mobile, hide the other */
     .hero-layer-card1 {
         width: 45%;
         bottom: -20px;
         right: 0;
         left: auto;
     }

     .hero-layer-card2 {
         display: none;
         /* Hide mostly decorative element */
     }
 }

 /* Core Features Section */
 /* ==================== CORE FEATURES SECTION ==================== */

 /* ==================== PAYROLL FEATURES SECTION ==================== */

 /* ==================== PAYROLL FEATURES SECTION ==================== */

 .payroll-features-section {
     padding: 5rem 0;
     background: var(--surface);
 }

 .payroll-section-header {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 4rem;
 }

 .payroll-section-header h2 {
     font-size: 2.8rem;
     font-weight: 800;
     margin-bottom: 1rem;
     color: var(--text-primary);
     line-height: 1.3;
 }

 .payroll-gradient-text {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .payroll-section-header p {
     font-size: 1.1rem;
     color: var(--text-secondary);
     line-height: 1.6;
 }

 .payroll-cards-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
 }

 /* Payroll Card with Gradient Borders */
 .payroll-card {
     background: var(--background);
     border-radius: 24px;
     padding: 2.5rem 2rem;
     transition: var(--transition);
     text-align: center;
     position: relative;
     border: 3px solid transparent;
     box-shadow: 0 4px 20px var(--shadow);
 }

 .payroll-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 50px var(--shadow-lg);
 }

 /* Icon Wrapper with Rounded Background */
 .payroll-icon-wrapper {
     width: 100px;
     height: 100px;
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
 }

 .payroll-icon-wrapper i {
     font-size: 2.5rem;
     color: var(--primary);
 }

 .fas,
 .far,
 .fab {
     letter-spacing: -0.5em;
     /* Collapse the   space */
 }

 .fas:before,
 .far:before,
 .fab:before {
     letter-spacing: normal;
     /* Reset for icon */
 }

 /* Icon Background Colors - Light Mode */
 .payroll-bg-cyan {
     background: linear-gradient(135deg, #cffafe, #a5f3fc);
 }

 .payroll-bg-purple {
     background: linear-gradient(135deg, #e9d5ff, #d8b4fe);
 }

 .payroll-bg-blue {
     background: linear-gradient(135deg, #dbeafe, #bfdbfe);
 }

 .payroll-bg-indigo {
     background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
 }

 .payroll-bg-orange {
     background: linear-gradient(135deg, #fed7aa, #fde68a);
 }

 .payroll-bg-teal {
     background: linear-gradient(135deg, #ccfbf1, #a5f3fc);
 }

 .payroll-card h3 {
     font-size: 1.35rem;
     margin-bottom: 1rem;
     color: var(--text-primary);
     font-weight: 700;
 }

 .payroll-card p {
     color: var(--text-secondary);
     line-height: 1.7;
     font-size: 0.95rem;
 }

 /* Responsive */
 @media (max-width: 968px) {
     .payroll-cards-grid {
         grid-template-columns: 1fr;
         gap: 1.5rem;
     }

     .payroll-section-header h2 {
         font-size: 2.2rem;
     }
 }

 @media (max-width: 640px) {
     .payroll-section-header h2 {
         font-size: 1.8rem;
     }

     .payroll-card {
         padding: 2rem 1.5rem;
     }
 }



 /* Detailed Features Section */
 .biz-features-section {
     padding: var(--spacing-2xl) 0;
     background: var(--background);
     overflow-x: hidden;
 }

 .container {
     max-width: 1240px;
     margin: 0 auto;
     padding: 0 var(--spacing-md);
 }

 /* --- Feature Row Layout --- */
 .biz-feature-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-2xl);
     margin-bottom: 120px;
     /* Space between feature blocks */
 }

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

 .biz-feature-row.reverse {
     flex-direction: row-reverse;
 }

 /* --- Text Content --- */
 .biz-content {
     flex: 1;
     max-width: 520px;
 }

 .biz-content h3 {
     font-size: 36px;
     line-height: 1.1;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: var(--spacing-md);
     letter-spacing: -0.02em;
 }

 .biz-content p {
     font-size: 18px;
     line-height: 1.6;
     color: var(--text-secondary);
     margin-bottom: var(--spacing-xl);
 }

 /* --- List Styling --- */
 .biz-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .biz-list li {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     margin-bottom: var(--spacing-sm);
     font-size: 16px;
     color: var(--text-primary);
     font-weight: 500;
 }

 .biz-list i {
     color: var(--primary);
     /* Create a subtle background for icon using surface color + border */
     background: var(--surface);
     border: 1px solid var(--border);
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 12px;
     flex-shrink: 0;
     transition: var(--transition);
 }

 /* Hover effect on list items */
 .biz-list li:hover i {
     background: var(--primary);
     color: #ffffff;
     border-color: var(--primary);
 }

 /* --- LAYERED VISUAL STYLING --- */

 .biz-visual {
     flex: 1.2;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 /* Decorative background blob behind images */
 .biz-visual::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     /* Using your gradient variable */
     background: radial-gradient(circle, var(--secondary) 0%, transparent 60%);
     opacity: 0.15;
     /* Low opacity so it doesn't clash with dark mode */
     z-index: 0;
     transform: translate(-10%, -10%);
     filter: blur(40px);
 }

 .biz-feature-row.reverse .biz-visual::before {
     transform: translate(10%, -10%);
 }

 /* Container for layers */
 .biz-layers-container {
     position: relative;
     width: 100%;
     max-width: 650px;
     min-height: 450px;
     display: flex;
     align-items: center;
     z-index: 1;
 }

 /* Common Layer Styles */
 .biz-layer {
     position: absolute;
     border-radius: var(--radius-xl);
     /* Using your shadow variables */
     /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border); */
     transition: var(--transition);
     /* background: var(--surface); */
     /* Ensures transparent PNGs have a backing in dark mode */
 }

 /* --- Layer Specifics --- */

 /* 1. Main Base Image */
 .biz-layer-main {
     position: relative;
     width: 90%;
     height: auto;
     z-index: 2;
     margin-left: auto;
     animation: floatMain 7s ease-in-out infinite;
 }

 /* 2. Overlay Image 1 (Phone/Card) */
 .biz-layer-overlay-1 {
     z-index: 3;
     width: 38%;
     bottom: -20px;
     left: 0;
     animation: floatOverlay1 5s ease-in-out infinite;
     /* border: 4px solid var(--surface); */
     /* Adds a "cutout" effect against other layers */
 }

 /* 3. Overlay Image 2 (Small Widget) */
 .biz-layer-overlay-2 {
     z-index: 4;
     width: 22%;
     top: -20px;
     right: 5%;
     border-radius: var(--radius-md);
     animation: floatOverlay2 6s ease-in-out infinite;
     /* border: 1px solid var(--border); */
 }

 /* --- REVERSE ROW LOGIC --- */

 .biz-feature-row.reverse .biz-layer-main {
     margin-left: 0;
     margin-right: auto;
 }

 .biz-feature-row.reverse .biz-layer-overlay-1 {
     left: auto;
     right: 0;
 }

 .biz-feature-row.reverse .biz-layer-overlay-2 {
     right: auto;
     left: 5%;
 }

 /* --- ANIMATIONS --- */

 @keyframes floatMain {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-12px);
     }
 }

 @keyframes floatOverlay1 {

     0%,
     100% {
         transform: translateY(0px) translateX(0px);
     }

     50% {
         transform: translateY(-20px) translateX(5px);
     }
 }

 @keyframes floatOverlay2 {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(15px);
     }
 }

 /* Hover Interactions */
 .biz-layers-container:hover .biz-layer-main {
     transform: translateY(-5px) scale(1.02);
     box-shadow: var(--shadow-lg);
 }

 .biz-layers-container:hover .biz-layer {
     animation-play-state: paused;
 }

 /* --- RESPONSIVE --- */

 @media (max-width: 992px) {

     .biz-feature-row,
     .biz-feature-row.reverse {
         flex-direction: column;
         text-align: center;
         gap: var(--spacing-xl);
     }

     .biz-content {
         max-width: 100%;
         padding: 0 var(--spacing-sm);
     }

     .biz-list {
         display: inline-block;
         text-align: left;
     }

     .biz-layers-container {
         min-height: 350px;
         max-width: 500px;
     }

     .biz-layer-main {
         width: 100%;
         margin: 0 auto !important;
     }

     .biz-layer-overlay-1 {
         width: 35%;
         bottom: -10px;
     }

     .biz-layer-overlay-2 {
         display: none;
     }
 }

 @media (max-width: 600px) {
     .biz-layers-container {
         min-height: auto;
         padding-bottom: 40px;
     }

     .biz-layer-overlay-1 {
         width: 45%;
         bottom: 0;
         right: 0;
         left: auto;
     }

     .biz-feature-row.reverse .biz-layer-overlay-1 {
         left: auto;
         right: 0;
     }

     .biz-content h3 {
         font-size: 28px;
     }
 }

 /* Stats Section */
 /* ==================== CONNECT WITH US SECTION ==================== */

 .connect-with-us-section {
     padding: 6rem 0;
     background: var(--surface);
     position: relative;
 }

 .connect-header {
     text-align: center;
     max-width: 700px;
     margin: 0 auto 4rem;
 }

 .connect-header h2 {
     font-size: 3rem;
     font-weight: 800;
     color: var(--text-primary);
     margin-bottom: 1rem;
     line-height: 1.2;
 }

 .connect-gradient {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     position: relative;
 }

 .connect-gradient::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #f59e0b, #eab308);
     border-radius: 2px;
 }

 .connect-header p {
     font-size: 1.15rem;
     color: var(--text-secondary);
     line-height: 1.6;
 }

 /* Cards Grid */
 .connect-cards-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     max-width: 1200px;
     margin: 0 auto;
 }

 /* Card Styling */
 .connect-card {
     background: var(--background);
     border: 2px solid var(--border);
     border-radius: 24px;
     padding: 3rem 2rem;
     text-align: center;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

 .connect-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #667eea, #764ba2);
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

 .connect-card:hover::before {
     transform: scaleX(1);
 }

 .connect-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 60px var(--shadow-lg);
     border-color: var(--primary);
 }

 /* Card Icon */
 .connect-card-icon {
     width: 160px;
     height: 160px;
     background: transparent;
     /* Remove background to show icon fully */
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 2rem;
     transition: all 0.3s ease;
 }

 .connect-card:hover .connect-card-icon {
     transform: scale(1.08);
 }

 .connect-card-icon img {
     width: fit-content;
     height: 100%;
     object-fit: contain;
 }

 /* Card Title */
 .connect-card h3 {
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1.5rem;
     line-height: 1.4;
 }

 /* Card Button */
 .connect-btn {
     display: inline-block;
     padding: 14px 36px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 50px;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
 }

 .connect-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5);
     background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }

 /* Responsive */
 @media (max-width: 968px) {
     .connect-cards-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .connect-header h2 {
         font-size: 2.5rem;
     }
 }

 @media (max-width: 640px) {
     .connect-with-us-section {
         padding: 4rem 0;
     }

     .connect-header h2 {
         font-size: 2rem;
     }

     .connect-card {
         padding: 2.5rem 1.5rem;
     }

     .connect-card-icon {
         width: 120px;
         height: 120px;
     }

     .connect-card-icon img {
         width: 50px;
         height: 50px;
     }

     .connect-card h3 {
         font-size: 1.2rem;
     }
 }


 /* Responsive */
 @media (max-width: 968px) {

     .hero-content-payroll,
     .feature-row,
     .benefits-grid {
         grid-template-columns: 1fr;
     }

     .features-grid-3 {
         grid-template-columns: 1fr;
     }

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

     .hero-text h1 {
         font-size: 2.5rem;
     }

     .feature-row:nth-child(even) {
         direction: ltr;
     }
 }

 @media (max-width: 640px) {
     .stats-grid {
         grid-template-columns: 1fr;
     }
 }