/* bbps new services =============================================================================================*/
    /* Modern Background Glowing Orbs */
    .bbps-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }

    .bbps-orb-1 {
      width: 500px;
      height: 500px;
      background: rgba(76, 196, 230, 0.3);
      top: -100px;
      right: -50px;
    }

    .bbps-orb-2 {
      width: 400px;
      height: 400px;
      background: rgba(92, 104, 198, 0.25);
      bottom: -100px;
      left: -100px;
    }

    .bbps-card {
      /* background: rgba(255, 255, 255, 0.9); */
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      /* border-radius: 32px; */
      /* max-width: 1040px; */
      width: 100%;
      /* border: 1px solid rgba(255, 255, 255, 0.6); */
      /* box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05); */
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .bbps-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 40px;
    }

    .bbps-hero-left {
      flex: 1;
      max-width: 480px;
    }

    .bbps-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    .bbps-h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }

    /* Modern Text Gradient */
    
    .new-service-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  .bbps-text-gradient-new-heading {
      margin-top: 1rem;
    }
    .bbps-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .bbps-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .bbps-feature {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .bbps-feat-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bbps-feature:hover .bbps-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .bbps-feat-text h4 {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .bbps-feat-text p {
      font-size: 12px;
      color: #94a3b8;
      line-height: 1.5;
      font-weight: 500;
    }

    .bbps-btn-wrap {
      animation: fadeUp 0.6s 0.4s ease both;
    }

    .bbps-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }

    .bbps-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }

    .bbps-btn:hover::before {
      left: 100%;
    }

    .bbps-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4);
    }

    .bbps-btn:active {
      transform: scale(0.97);
    }

    .bbps-btn-arrow {
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    /* ── MODERN MOBILE MOCKUP ── */
    .bbps-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 260px;
      height: 420px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
    }

    /* Glassmorphic Tap Pill */
    .bbps-tap-pill {
      position: absolute;
      top: 40px;
      right: -30px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 10;
    }

    .bbps-tap-dot {
      width: 8px;
      height: 8px;
      background: #10b981;
      border-radius: 50%;
      animation: dotBlink 1.5s ease-in-out infinite;
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
    }

    .bbps-tap-pill span {
      font-size: 11px;
      font-weight: 800;
      color: #0f172a;
    }

    /* Platform shadow */
    .bbps-platform-base {
      width: 200px;
      height: 20px;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    .bbps-mobile-device {
      width: 200px;
      height: 400px;
      background: #ffffff;
      border-radius: 36px;
      border: 6px solid #f8fafc;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
      margin: 0 auto;
    }

    /* Modern Dynamic Island Notch */
    .bbps-mobile-notch {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 16px;
      background: #0f172a;
      border-radius: 12px;
      z-index: 5;
    }

    .bbps-mobile-screen {
      padding: 40px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      height: 100%;
      background: #f8fafc;
      position: relative;
    }

    .bbps-mobile-screen::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(180deg, rgba(76, 196, 230, 0.15) 0%, transparent 100%);
    }

    .bbps-app-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .bbps-app-title {
      font-size: 11px;
      font-weight: 800;
      color: #0f172a;
    }

    .bbps-avatar {
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, #5c68c6, #4cc4e6);
      border-radius: 50%;
    }

    .bbps-bill-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.8);
      position: relative;
      z-index: 2;
    }

    .bbps-biller-icon {
      width: 36px;
      height: 36px;
      background: #f0f9ff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
    }

    .bbps-biller-icon svg {
      width: 18px;
      height: 18px;
      stroke: #4cc4e6;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bbps-amount-row {
      font-size: 24px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .bbps-txn-badge {
      display: inline-block;
      background: #ecfdf5;
      color: #059669;
      font-size: 8px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 12px;
      margin-bottom: 12px;
    }

    .bbps-txn-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 9px;
    }

    .bbps-txn-row span {
      color: #94a3b8;
    }

    .bbps-txn-row .bbps-v {
      color: #0f172a;
      font-weight: 700;
    }

    .bbps-biller-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: auto;
      position: relative;
      z-index: 2;
    }

    .bbps-b-item {
      background: #ffffff;
      border-radius: 10px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    }

    .bbps-b-item svg {
      width: 16px;
      height: 16px;
      stroke: #5c68c6;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bbps-pay-btn-ui {
      background: #0f172a;
      color: white;
      text-align: center;
      font-size: 11px;
      font-weight: 800;
      padding: 14px;
      border-radius: 12px;
      margin-top: 12px;
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.15);
      position: relative;
      z-index: 2;
    }

    /* ── FLOATING STATS BOTTOM ── */
    .bbps-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .bbps-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }

    .bbps-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .bbps-stat-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .bbps-stat-icon svg {
      width: 22px;
      height: 22px;
      stroke: #4cc4e6;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bbps-stat-text h4 {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.3;
    }

    .bbps-stat-text p {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 4px;
      font-weight: 500;
    }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

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

    @keyframes floatSmooth {

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

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

    @keyframes shadowPulse {

      0%,
      100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
      }

      50% {
        transform: translateX(-50%) scaleX(0.8);
        opacity: 0.5;
      }
    }

    @keyframes pillFloat {

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

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

    @keyframes dotBlink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(0.8);
      }
    }

    @media (max-width: 900px) {
      .bbps-hero {
        flex-direction: column;
        text-align: center;
        padding: 0px;
      }

      .bbps-hero-left {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .bbps-features-grid {
        grid-template-columns: 1fr;
        text-align: left;
      }

      .bbps-stats-container {
        flex-direction: column;
        padding: 0 24px 40px;
      }

      .bbps-hero-right {
        margin-top: 20px;
      }

      .bbps-h1 {
        font-size: 26px;
      }
      .bbps-features-grid
      {
        margin-bottom: 10px;
      } 
      .bbps-tap-pill{
        top: 80px;
        right: 7px;
      }
      .bbps-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }





/* pos services ======================================================================================================*/
/* Modern Background Glowing Orbs */
    .pos-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .pos-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .pos-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .pos-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1040px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .pos-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 40px;
    }

    .pos-hero-left { flex: 1; max-width: 480px; }

    .pos-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    .pos-h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    /* Modern Text Gradient */
    .pos-text-gradient {
      background: linear-gradient(135deg, #5c68c6  0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pos-desc {
      font-size: 16px;
      color: #f4f7fb;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .pos-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .pos-feature { display: flex; align-items: flex-start; gap: 14px; }

    .pos-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pos-feature:hover .feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .pos-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .pos-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .pos-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .pos-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .pos-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .pos-btn:hover::before { left: 100%; }
    .pos-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .pos-btn:active { transform: scale(0.97); }

    .pos-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── ULTRA-REALISTIC HARDWARE POS MOCKUP ── */
    .pos-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 260px;
      height: 420px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    /* Glassmorphic Tap Pill */
    .pos-tap-pill {
      position: absolute;
      top: 50px; right: -20px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .pos-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .pos-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .pos-platform-base {
      width: 240px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
      position: absolute;
      bottom: -15px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* POS Hardware Body - More Realistic & Metallic */
    .pos-device {
      width: 230px;
      height: 380px;
      background: linear-gradient(145deg, #1e293b, #0f172a); 
      border-radius: 20px 20px 12px 12px;
      border: 2px solid #334155;
      /* Deep realistic hardware shadow */
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35), 
                  inset 2px 2px 5px rgba(255,255,255,0.05), 
                  inset -4px -4px 15px rgba(0,0,0,0.6);
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 14px 12px 16px 12px;
      z-index: 10;
    }

    /* Animated Paper Receipt */
    .pos-receipt-paper {
      position: absolute;
      top: -10px; /* Starts hidden slightly inside */
      left: 50%;
      transform: translateX(-50%);
      width: 130px; height: 10px;
      background: #ffffff;
      border-radius: 4px 4px 0 0;
      z-index: 5;
      background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #f1f5f9 4px, #f1f5f9 6px);
      box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
      animation: printReceipt 10s infinite; /* Synced with success state */
    }
    .pos-receipt-paper::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 15px;
      background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.8));
    }
    /* Small shadow line above printer slot */
    .pos-printer-slot {
      position: absolute;
      top: -2px; left: 50%;
      transform: translateX(-50%);
      width: 140px; height: 4px;
      background: #020617;
      border-radius: 2px;
      z-index: 15;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    }

    /* Inserted Credit Card at Bottom */
    .pos-inserted-card {
      position: absolute;
      bottom: -20px; left: 50%;
      transform: translateX(-50%);
      width: 80px; height: 35px;
      background: linear-gradient(135deg, #eab308, #ca8a04);
      border-radius: 6px;
      z-index: 5;
      box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    }
    .pos-inserted-card::before {
      content: '';
      position: absolute;
      top: 6px; left: 8px;
      width: 14px; height: 10px;
      background: #fef08a;
      border-radius: 2px;
      opacity: 0.9;
    }

    /* Realistic Screen inside the POS */
    .pos-screen {
      flex: 1;
      background: radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 4px solid #020617; /* Thick bezel */
      box-shadow: inset 0 4px 12px rgba(0,0,0,0.25);
    }
    /* Screen Glass Glare Reflection */
    .pos-screen::after {
      content: '';
      position: absolute;
      top: -50%; left: -50%; width: 200%; height: 200%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
      transform: rotate(30deg);
      pointer-events: none;
      z-index: 10;
    }

    /* Hardware POS Chin (NFC Logo Area) */
    .pos-chin {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .pos-chin svg {
      width: 24px; height: 24px;
      stroke: #64748b;
      stroke-width: 2;
      fill: none;
    }

    /* ── DYNAMIC SCREEN CONTENT ── */
    .pos-app-header {
      background: #cbd5e1;
      padding: 8px;
      text-align: center;
      border-bottom: 1px solid #94a3b8;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative; z-index: 2;
    }
    .pos-app-title { font-size: 11px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.05em; }

    .pos-screen-inner {
      position: relative;
      width: 100%;
      height: 100%;
      flex: 1;
    }

    /* Screen Activity States */
    .pos-screen-state {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px;
      opacity: 0;
    }

    /* State 1: Tap/Insert Card */
    .pos-state-tap { animation: showTap 10s infinite; }
    .pos-biller-icon {
      width: 48px; height: 48px;
      background: rgba(76, 196, 230, 0.1); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 12px;
    }
    .pos-biller-icon svg { width: 24px; height: 24px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .pos-amount-label { font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
    .pos-amount-row { font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 16px; }
    .pos-txn-badge {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      background: #1e293b; color: #ffffff;
      font-size: 10px; font-weight: 700; padding: 10px 16px; border-radius: 8px;
      animation: pulseGlow 2s infinite;
      width: 100%;
    }
    .pos-txn-badge svg { width: 12px; height: 12px; stroke: #ffffff; stroke-width: 2; fill: none; }
    /* State 2: Processing */
    .pos-state-processing { animation: showProcessing 10s infinite; }
    .pos-spinner {
      width: 32px; height: 32px;
      border: 4px solid rgba(76, 196, 230, 0.3);
      border-top-color: #4cc4e6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }
    .pos-processing-text { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 4px; text-align: center; }
    .pos-processing-sub { font-size: 9px; font-weight: 600; color: #94a3b8; text-transform: uppercase; text-align: center; }
    /* State 3: Approved */
    .pos-state-approved { animation: showSuccess 10s infinite; }
    .pos-success-icon {
      width: 44px; height: 44px; background: #10b981; border-radius: 50%;
      display: flex; justify-content: center; align-items: center; 
      color: white; font-weight: bold; margin-bottom: 12px; font-size: 22px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
    /* ── AUTOMATED LOOPING ANIMATIONS (10s Cycle) ── */
    /* Screen Visibility Keyframes */
    @keyframes showTap {
      0%, 35% { opacity: 1; z-index: 2; }
      38%, 100% { opacity: 0; z-index: 0; }
    }
    @keyframes showProcessing {
      0%, 35% { opacity: 0; z-index: 0; }
      38%, 68% { opacity: 1; z-index: 2; }
      70%, 100% { opacity: 0; z-index: 0; }
    }
    @keyframes showSuccess {
      0%, 68% { opacity: 0; z-index: 0; }
      70%, 96% { opacity: 1; z-index: 2; }
      98%, 100% { opacity: 0; z-index: 0; }
    }
    /* Printer Animation - receipt comes out during Success state */
    @keyframes printReceipt {
      0%, 70% { height: 10px; top: -10px; opacity: 0; }
      75% { opacity: 1; }
      85%, 96% { height: 45px; top: -45px; opacity: 1; }
      98%, 100% { height: 10px; top: -10px; opacity: 0; }
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }
    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 0 rgba(15, 23, 42, 0); }
      50%       { box-shadow: 0 0 10px rgba(15, 23, 42, 0.3); }
    }
    /* ── FLOATING STATS BOTTOM ── */
    .pos-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }
    .pos-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .pos-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }
    .pos-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .pos-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .pos-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .pos-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }
    @media (max-width: 900px) {
      .pos-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .pos-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .pos-features-grid { grid-template-columns: 1fr; text-align: left; }
      .pos-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .pos-hero-right { margin-top: 50px; }
      .pos-h1 { font-size: 26px; }
            .pos-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }
/* matm ====================================================================================================================== */



/* Modern Background Glowing Orbs */
    .matm-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .matm-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .matm-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .matm-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1040px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .matm-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 40px;
    }

    .matm-hero-left { flex: 1; max-width: 480px; }

    .matm-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    .matm-h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    /* Modern Text Gradient */
    .matm-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .matm-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .matm-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .matm-feature { display: flex; align-items: flex-start; gap: 14px; }

    .matm-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .matm-feature:hover .matm-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .matm-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .matm-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .matm-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .matm-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .matm-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .matm-btn:hover::before { left: 100%; }
    .matm-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .matm-btn:active { transform: scale(0.97); }

    .btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── ULTRA-REALISTIC HARDWARE MATM MOCKUP ── */
    .matm-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 260px;
      height: 420px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Glassmorphic Tap Pill */
    .matm-tap-pill {
      position: absolute;
      top: 40px; right: -25px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .matm-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .matm-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .matm-platform-base {
      width: 220px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
      position: absolute;
      bottom: 5px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* 3D Realistic mATM Hardware Body */
    .matm-device {
      width: 190px;
      height: 350px;
      background: linear-gradient(145deg, #1e293b, #0f172a); /* Metallic dark gradient */
      border-radius: 24px;
      border: 2px solid #334155;
      /* Realistic recessed box shadows */
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35), 
                  inset 2px 2px 5px rgba(255,255,255,0.05), 
                  inset -4px -4px 15px rgba(0,0,0,0.6);
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 16px 14px;
      z-index: 10;
    }

    /* Inserted Card at Top */
    .matm-inserted-card {
      position: absolute;
      top: -24px; left: 50%;
      transform: translateX(-50%);
      width: 80px; height: 35px;
      background: linear-gradient(135deg, #4cc4e6, #5c68c6);
      border-radius: 6px;
      z-index: 5;
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
      animation: cardPulse 3s infinite alternate;
    }
    .matm-inserted-card::before {
      content: '';
      position: absolute;
      bottom: 6px; left: 8px;
      width: 14px; height: 10px;
      background: #fef08a;
      border-radius: 2px;
      opacity: 0.9;
    }
    /* Card Slot Bezel */
    .card-slot {
      position: absolute;
      top: -2px; left: 50%;
      transform: translateX(-50%);
      width: 90px; height: 6px;
      background: #020617;
      border-radius: 0 0 6px 6px;
      z-index: 15;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    }

    /* Realistic Screen inside the mATM */
    .matm-screen {
      height: 150px;
      background: radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%); /* Backlight effect */
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      margin-bottom: 16px;
      border: 3px solid #020617; /* Deep screen bezel */
      box-shadow: inset 0 4px 12px rgba(0,0,0,0.25);
    }
    /* Screen Glass Glare */
    .matm-screen::after {
      content: '';
      position: absolute;
      top: 0; left: -50%; width: 200%; height: 100%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-20deg);
      pointer-events: none;
      z-index: 10;
    }

    /* Screen Content Base */
    .matm-app-header {
      background: #cbd5e1;
      padding: 6px;
      text-align: center;
      border-bottom: 1px solid #94a3b8;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative; z-index: 2;
    }
    .matm-app-title { font-size: 9px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.05em; }

    .matm-screen-inner {
      position: relative;
      width: 100%;
      height: 100%;
      flex: 1;
    }

    /* ── SCREEN ACTIVITY STATES ── */
    .matm-screen-state {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      opacity: 0;
    }

    /* State 1: Enter PIN */
    .matm-state-pin { animation: showPin 10s infinite; }
    .matm-biller-icon {
      width: 32px; height: 32px;
      background: rgba(76, 196, 230, 0.15); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 8px;
    }
    /* Fixed Perfect Rupee SVG */
    .matm-biller-icon svg { width: 16px; height: 16px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    
    .matm-amount-label { font-size: 10px; color: #0f172a; font-weight: 800; margin-bottom: 4px; }
    .matm-amount-row { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
    
    .matm-pin-box { display: flex; gap: 4px; margin-top: 2px; }
    .matm-pin-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: transparent; border: 2px solid #94a3b8;
    }

    /* State 2: Processing */
    .matm-state-processing { animation: showProcessing 10s infinite; }
    .matm-spinner {
      width: 26px; height: 26px;
      border: 3px solid rgba(76, 196, 230, 0.3);
      border-top-color: #4cc4e6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 12px;
    }
    .matm-processing-text { font-size: 11px; font-weight: 800; color: #0f172a; margin-bottom: 4px; text-align: center; }
    .matm-processing-sub { font-size: 8px; font-weight: 600; color: #94a3b8; text-transform: uppercase; text-align: center; }

    /* State 3: Success */
    .matm-state-success { animation: showSuccess 10s infinite; }
    .matm-success-icon {
      width: 34px; height: 34px; background: #10b981; border-radius: 50%;
      display: flex; justify-content: center; align-items: center; 
      color: white; font-weight: bold; margin-bottom: 10px; font-size: 18px;
    }


    /* Hardware Keypad Area */
    .matm-keypad-bg {
      background: #0f172a;
      border-radius: 12px;
      padding: 8px;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
      flex: 1;
    }

    .matm-keypad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px 6px;
      height: 100%;
    }

    /* 3D Keys Base */
    .matm-key {
      background: linear-gradient(to bottom, #334155, #1e293b);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f1f5f9;
      font-size: 12px;
      font-weight: 700;
      border: 1px solid #475569;
      box-shadow: 0 4px 0 #020617, 0 5px 6px rgba(0,0,0,0.5); /* 3D effect */
    }
    
    /* 3D Color Keys */
    .matm-key.matm-green { background: linear-gradient(to bottom, #10b981, #047857); border-color: #059669; box-shadow: 0 4px 0 #022c22, 0 5px 6px rgba(0,0,0,0.5); color: white;}
    .matm-key.matm-red { background: linear-gradient(to bottom, #ef4444, #b91c1c); border-color: #dc2626; box-shadow: 0 4px 0 #450a0a, 0 5px 6px rgba(0,0,0,0.5); color: white;}
    .matm-key.matm-yellow { background: linear-gradient(to bottom, #f59e0b, #b45309); border-color: #d97706; box-shadow: 0 4px 0 #451a03, 0 5px 6px rgba(0,0,0,0.5); color: white;}

    /* ── AUTOMATED LOOPING ANIMATIONS (10s Cycle) ── */
    
    @keyframes showPin {
      0%, 43% { opacity: 1; z-index: 2; }
      45%, 100% { opacity: 0; z-index: 0; }
    }
    @keyframes showProcessing {
      0%, 43% { opacity: 0; z-index: 0; }
      45%, 68% { opacity: 1; z-index: 2; }
      70%, 100% { opacity: 0; z-index: 0; }
    }
    @keyframes showSuccess {
      0%, 68% { opacity: 0; z-index: 0; }
      70%, 96% { opacity: 1; z-index: 2; }
      98%, 100% { opacity: 0; z-index: 0; }
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    /* Key Press Animations */
    @keyframes pressAnim {
      0%, 2% { transform: translateY(0); box-shadow: 0 4px 0 #020617, 0 5px 6px rgba(0,0,0,0.5); }
      3%, 6% { transform: translateY(4px); box-shadow: 0 0px 0 #020617, 0 1px 2px rgba(0,0,0,0.6); }
      7%, 100% { transform: translateY(0); box-shadow: 0 4px 0 #020617, 0 5px 6px rgba(0,0,0,0.5); }
    }
    @keyframes pressAnimGreen {
      0%, 2% { transform: translateY(0); box-shadow: 0 4px 0 #022c22, 0 5px 6px rgba(0,0,0,0.5); }
      3%, 6% { transform: translateY(4px); box-shadow: 0 0px 0 #022c22, 0 1px 2px rgba(0,0,0,0.6); }
      7%, 100% { transform: translateY(0); box-shadow: 0 4px 0 #022c22, 0 5px 6px rgba(0,0,0,0.5); }
    }

    .matm-press-1 { animation: pressAnim 10s infinite; animation-delay: 1s; }
    .matm-press-2 { animation: pressAnim 10s infinite; animation-delay: 2s; }
    .matm-press-3 { animation: pressAnim 10s infinite; animation-delay: 3s; }
    .matm-press-4 { animation: pressAnim 10s infinite; animation-delay: 4s; }
    .matm-press-enter { animation: pressAnimGreen 10s infinite; animation-delay: 4.5s; }

    /* Screen PIN Dots Sync */
    @keyframes fillDot1 { 0%, 10%{ background: transparent; border-color: #94a3b8; } 11%, 44%{ background: #0f172a; border-color: #0f172a; } 45%, 100%{ background: transparent; border-color: #94a3b8; } }
    @keyframes fillDot2 { 0%, 20%{ background: transparent; border-color: #94a3b8; } 21%, 44%{ background: #0f172a; border-color: #0f172a; } 45%, 100%{ background: transparent; border-color: #94a3b8; } }
    @keyframes fillDot3 { 0%, 30%{ background: transparent; border-color: #94a3b8; } 31%, 44%{ background: #0f172a; border-color: #0f172a; } 45%, 100%{ background: transparent; border-color: #94a3b8; } }
    @keyframes fillDot4 { 0%, 40%{ background: transparent; border-color: #94a3b8; } 41%, 44%{ background: #0f172a; border-color: #0f172a; } 45%, 100%{ background: transparent; border-color: #94a3b8; } }

    .matm-pin-dot:nth-child(1) { animation: fillDot1 10s infinite; }
    .matm-pin-dot:nth-child(2) { animation: fillDot2 10s infinite; }
    .matm-pin-dot:nth-child(3) { animation: fillDot3 10s infinite; }
    .matm-pin-dot:nth-child(4) { animation: fillDot4 10s infinite; }

    /* ── FLOATING STATS BOTTOM ── */
    .matm-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .matm-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .matm-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .matm-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .matm-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .matm-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .matm-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }
    @keyframes cardPulse {
      0% { transform: translateX(-50%) translateY(0); }
      100% { transform: translateX(-50%) translateY(3px); }
    }

    @media (max-width: 900px) {
      .matm-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .matm-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .matm-features-grid { grid-template-columns: 1fr; text-align: left; }
      .matm-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .matm-hero-right { margin-top: 30px; }
      .matm-h1 { font-size: 26; }
            .matam-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }

    /* ======genix collect =============================================================================== */


    /* Modern Background Glowing Orbs */
    .genix-collect-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-collect-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-collect-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-collect-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1040px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-collect-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 40px;
    }

    .genix-collect-hero-left { flex: 1; max-width: 480px; }

    .genix-collect-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-collect-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-collect-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-collect-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .genix-collect-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-collect-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .genix-collect-feature:hover .feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }
    .genix-collect-feat-icon svg { width: 20px; height: 20px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .genix-collect-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-collect-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .genix-collect-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-collect-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-collect-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-collect-btn:hover::before { left: 100%; }
    .genix-collect-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-collect-btn:active { transform: scale(0.97); }

    .genix-collect-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── PAYMENT GATEWAY MOBILE MOCKUP ── */
    .genix-collect-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 280px;
      height: 480px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Glassmorphic Tap Pill */
    .genix-collect-tap-pill {
      position: absolute;
      top: 40px; right: -20px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .genix-collect-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-collect-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .genix-collect-platform-base {
      width: 220px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
      position: absolute;
      bottom: 5px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* Mobile Device Body */
    .genix-collect-mobile-device {
      width: 240px;
      height: 460px;
      background: #ffffff; 
      border-radius: 36px;
      border: 6px solid #f1f5f9;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.15), inset 0 0 0 1px rgba(0,0,0,0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 10;
    }

    /* Notch */
    .genix-collect-mobile-notch {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 60px; height: 16px;
      background: #0f172a;
      border-radius: 0 0 12px 12px;
      z-index: 15;
    }

    /* Checkout Header */
    .genix-collect-checkout-header {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      padding: 34px 16px 20px;
      color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .genix-collect-checkout-header::before {
      content: ''; position: absolute; right: -20px; top: -20px;
      width: 80px; height: 80px; border-radius: 50%;
      background: radial-gradient(circle, rgba(76, 196, 230, 0.3) 0%, transparent 70%);
    }
    .genix-collect-merchant-name { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; position: relative; z-index: 2;}
    .genix-collect-checkout-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; position: relative; z-index: 2;}

    /* Screen Inner Content */
    .genix-collect-screen-content {
      flex: 1;
      background: #f8fafc;
      position: relative;
    }

    /* ── ANIMATED SCREEN STATES ── */
    .genix-collect-screen-state {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      padding: 16px;
      opacity: 0;
      display: flex;
      flex-direction: column;
    }

    /* State 1: Checkout Options */
    .genix-collect-state-checkout { animation: showCheckout 10s infinite; }
    .genix-collect-section-title { font-size: 10px; font-weight: 800; color: #0f172a; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em;}
    
    .genix-collect-pay-option {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
    }
    .genix-collect-pay-option.active {
      border-color: #4cc4e6;
      box-shadow: 0 4px 12px rgba(76, 196, 230, 0.15);
      background: #f0f9ff;
    }
    .genix-collect-opt-icon {
      width: 32px; height: 32px; background: #f8fafc; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
    }
    .genix-collect-pay-option.active .genix-collect-opt-icon { background: #ffffff; }
    
    .genix-collect-opt-icon svg { width: 16px; height: 16px; stroke: #5c68c6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    
    .genix-collect-opt-text { flex: 1; }
    .genix-collect-opt-text h4 { font-size: 11px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
    .genix-collect-opt-text p { font-size: 9px; font-weight: 500; color: #94a3b8; }
    
    .genix-collect-radio-btn { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cbd5e1; }
    .genix-collect-pay-option.active .genix-collect-radio-btn { border-color: #4cc4e6; border-width: 4px; }

    .genix-collect-pay-btn-ui {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: white; text-align: center; font-size: 12px; font-weight: 800;
      padding: 14px; border-radius: 12px; margin-top: auto;
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.25);
    }

    /* State 2 & 3: Processing & Success */
    .genix-collect-state-center { justify-content: center; align-items: center; text-align: center; }
    .genix-collect-state-processing { animation: showProcessing 10s infinite; }
    .genix-collect-state-success { animation: showSuccess 10s infinite; }

    .genix-collect-spinner {
      width: 40px; height: 40px;
      border: 4px solid rgba(76, 196, 230, 0.3);
      border-top-color: #4cc4e6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }
    .genix-collect-success-icon {
      width: 48px; height: 48px; background: #10b981; border-radius: 50%;
      display: flex; justify-content: center; align-items: center; 
      color: white; font-weight: bold; margin-bottom: 16px; font-size: 24px;
      box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25);
    }
    .genix-collect-status-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
    .genix-collect-status-sub { font-size: 10px; font-weight: 600; color: #94a3b8; }

    /* ── AUTOMATED LOOPING ANIMATIONS (10s Cycle) ── */
    @keyframes showCheckout {
      0%, 40% { opacity: 1; z-index: 2; transform: scale(1); }
      42%, 100% { opacity: 0; z-index: 0; transform: scale(0.95); }
    }
    @keyframes showProcessing {
      0%, 40% { opacity: 0; z-index: 0; transform: scale(0.95); }
      42%, 65% { opacity: 1; z-index: 2; transform: scale(1); }
      67%, 100% { opacity: 0; z-index: 0; transform: scale(0.95); }
    }
    @keyframes showSuccess {
      0%, 65% { opacity: 0; z-index: 0; transform: scale(0.95); }
      67%, 96% { opacity: 1; z-index: 2; transform: scale(1); }
      98%, 100% { opacity: 0; z-index: 0; transform: scale(0.95); }
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    /* ── FLOATING STATS BOTTOM ── */
    .genix-collect-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-collect-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-collect-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-collect-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-collect-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-collect-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-collect-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-16px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }

    @media (max-width: 900px) {
      .genix-collect-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-collect-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-collect-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-collect-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix-collect-hero-right { margin-top: 30px; }
      .genix-collect-h1 { font-size: 26px; }
            .genix-collect-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }

  /* ====== Genix Transact =============================================================================== */

    /* Background Glowing Orbs */
    .genix-disburse-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-disburse-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-disburse-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-disburse-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1040px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-disburse-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 40px;
    }

    .genix-disburse-hero-left { flex: 1; max-width: 480px; }

    .genix-disburse-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-disburse-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-disburse-desc {
      font-size: 16px;
      color: #0f172a;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-disburse-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .genix-disburse-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-disburse-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .genix-disburse-feature:hover .feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }
    .genix-disburse-feat-icon svg { width: 20px; height: 20px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .genix-disburse-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-disburse-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .genix-disburse-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-disburse-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-disburse-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-disburse-btn:hover::before { left: 100%; }
    .genix-disburse-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-disburse-btn:active { transform: scale(0.97); }

    .genix-disburse-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── PAYOUT DASHBOARD WIDGET ── */
    .genix-disburse-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 320px;
      height: 440px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .genix-disburse-tap-pill {
      position: absolute;
      top: 20px; right: -20px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .genix-disburse-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-disburse-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    .genix-disburse-platform-base {
      width: 260px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
      position: absolute;
      bottom: 5px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* Payout Modal UI */
    .genix-disburse-payout-modal {
      width: 100%;
      height: 400px;
      background: #ffffff; 
      border-radius: 24px;
      border: 4px solid #f1f5f9;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.15), inset 0 0 0 1px rgba(0,0,0,0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 10;
    }

    .genix-disburse-modal-header {
      background: #f8fafc;
      padding: 20px 20px 16px;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .genix-disburse-modal-title { font-size: 14px; font-weight: 800; color: #0f172a; }
    .genix-disburse-modal-close { width: 28px; height: 28px; background: #e2e8f0; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #64748b; font-size: 12px; font-weight: bold;}

    .screen-content {
      flex: 1;
      background: #ffffff;
      position: relative;
    }

    /* ── ANIMATED SCREEN STATES ── */
    .genix-disburse-screen-state {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      padding: 20px;
      opacity: 0;
      display: flex;
      flex-direction: column;
    }

    /* State 1: Transfer Setup */
    .genix-disburse-state-setup { animation: showSetup 10s infinite; }
    
    .genix-disburse-beneficiary-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      border: 1px solid #e2e8f0;
    }
    .genix-disburse-ben-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, #5c68c6, #4cc4e6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; }
    .genix-disburse--info h4 { font-size: 12px; font-weight: 800; color: #0f172a; margin-bottom: 2px;}
    .genix-disburse-ben-info p { font-size: 10px; font-weight: 600; color: #94a3b8 }

    .genix-disburse-amount-input-box {
      text-align: center;
      margin-bottom: 24px;
    }
    .genix-disburse-amount-label { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;}
    .genix-disburse-amount-value { font-size: 36px; font-weight: 800; color: #0f172a; letter-spacing: -1px; display: flex; justify-content: center; align-items: center; gap: 4px; }
    
    /* Clean Rupee SVG */
    .genix-disburse-rupee-svg { width: 22px; height: 22px; stroke: #0f172a; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .genix-disburse-mode-selector {
      display: flex;
      gap: 8px;
      margin-bottom: auto;
    }
    .genix-disburse-mode-btn {
      flex: 1; padding: 10px; text-align: center; border-radius: 8px; font-size: 10px; font-weight: 800; border: 1px solid #e2e8f0; color: #94a3b8
    }
    .genix-disburse-mode-btn.active {
      background: #f0f9ff; border-color: #4cc4e6; color: #0284c7;
    }

    .genix-disburse-pay-btn-ui {
      background: #0f172a;
      color: white; text-align: center; font-size: 13px; font-weight: 800;
      padding: 16px; border-radius: 14px; margin-top: auto;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
    }

    /* State 2 & 3: Processing & Success */
    .genix-disburse-state-center { justify-content: center; align-items: center; text-align: center; }
    .genix-disburse-state-processing { animation: showProcessing 10s infinite; }
    .genix-disburse-state-success { animation: showSuccess 10s infinite; }

    .genix-disburse-spinner {
      width: 48px; height: 48px;
      border: 4px solid rgba(76, 196, 230, 0.2);
      border-top-color: #4cc4e6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20px;
    }
    .genix-disburse-success-icon {
      width: 56px; height: 56px; background: #10b981; border-radius: 50%;
      display: flex; justify-content: center; align-items: center; 
      color: white; font-weight: bold; margin-bottom: 20px; font-size: 28px;
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
    }
    .genix-disburse-status-title { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
    .genix-disburse-status-sub { font-size: 11px; font-weight: 600; color: #94a3b8; line-height: 1.5; }
    .genix-disburse-success-amt { font-size: 24px; font-weight: 800; color: #0f172a; margin-top: 12px; }

    /* ── AUTOMATED LOOPING ANIMATIONS (10s Cycle) ── */
    @keyframes showSetup {
      0%, 40% { opacity: 1; z-index: 2; transform: translateY(0); }
      42%, 100% { opacity: 0; z-index: 0; transform: translateY(-10px); }
    }
    @keyframes showProcessing {
      0%, 40% { opacity: 0; z-index: 0; transform: translateY(10px); }
      42%, 65% { opacity: 1; z-index: 2; transform: translateY(0); }
      67%, 100% { opacity: 0; z-index: 0; transform: translateY(-10px); }
    }
    @keyframes showSuccess {
      0%, 65% { opacity: 0; z-index: 0; transform: scale(0.9); }
      67%, 96% { opacity: 1; z-index: 2; transform: scale(1); }
      98%, 100% { opacity: 0; z-index: 0; transform: scale(0.9); }
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    /* ── FLOATING STATS BOTTOM ── */
    .genix-disburse-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-disburse-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-disburse-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-disburse-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-disburse-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-disburse-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-disburse-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }

    @media (max-width: 900px) {
      .genix-disburse-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-disburse-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-disburse-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-disburse-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix-disburse-hero-right { margin-top: 30px; }
      h1 { font-size: 26px; }
            .genix-disburse-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }

  /* ====== Genix Vault
 =============================================================================== */

 /* Modern Background Glowing Orbs */
    .genix-vault-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-vault-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-vault-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-vault-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1100px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-vault-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 50px;
    }

    .genix-vault-hero-left { flex: 1; max-width: 500px; }

    .genix-vault-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-vault-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-vault-desc {
      font-size: 16px;
      color: #f4f7fb;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-vault-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }
.genix-vault-feat-icon svg{
  width: 20px; height: 20px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
    .genix-vault-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-vault-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .genix-vault-feature:hover .genix-vault-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .genix-vault-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-vault-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .genix-vault-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-vault-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-vault-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-vault-btn:hover::before { left: 100%; }
    .genix-vault-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-vault-btn:active { transform: scale(0.97); }

    .btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── MODERN STRAIGHT MOBILE WALLET MOCKUP ── */
    .genix-vault-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 280px;
      height: 480px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Glassmorphic Tap Pill */
    .genix-vault-tap-pill {
      position: absolute;
      top: 40px; right: -15px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 10;
    }
    .genix-vault-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-vault-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .genix-vault-platform-base {
      width: 220px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, transparent 70%);
      position: absolute;
      bottom: 5px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    .genix-vault-mobile-device {
      width: 240px;
      height: 460px;
      background: #ffffff;
      border-radius: 36px;
      border: 6px solid #f8fafc;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }

    /* Modern Dynamic Island Notch */
    .genix-vault-mobile-notch {
      position: absolute;
      top: 10px; left: 50%;
      transform: translateX(-50%);
      width: 65px; height: 18px;
      background: #0f172a;
      border-radius: 12px;
      z-index: 5;
    }

    .genix-vault-mobile-screen {
      padding: 44px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      height: 100%;
      background: #f8fafc;
      position: relative;
    }

    /* App Header */
    .genix-vault-app-header {
      display: flex; justify-content: space-between; align-items: center;
      position: relative; z-index: 2;
    }
    .genix-vault-app-title { font-size: 12px; font-weight: 800; color: #0f172a; }
    .genix-vault-avatar { width: 28px; height: 28px; background: linear-gradient(135deg, #4cc4e6, #5c68c6); border-radius: 50%; }

    /* Digital Wallet Card */
    .genix-vault-wallet-card {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-radius: 18px;
      padding: 18px 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
      border: 1px solid rgba(76, 196, 230, 0.25);
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 120px;
    }
    
    /* Abstract Card Design */
    .genix-vault-wallet-card::before {
      content: ''; position: absolute; right: -20px; top: -20px;
      width: 100px; height: 100px; border-radius: 50%;
      background: radial-gradient(circle, rgba(76, 196, 230, 0.35) 0%, transparent 70%);
      pointer-events: none;
    }
    
    /* Official UPI Logo Positioned Absolute to avoid overlap */
    .genix-vault-upi-logo-box {
      position: absolute;
      top: 14px;
      right: 14px;
      background: #ffffff;
      padding: 4px 6px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      z-index: 5;
    }
    .genix-vault-upi-img {
      height: 12px;
      width: auto;
      content: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/UPI-Logo-vector.svg');
    }

    .genix-vault-balance-wrapper {
      position: relative;
      z-index: 2;
      margin-bottom: 12px;
    }
    .genix-vault-card-label { 
      font-size: 10px; 
      font-weight: 700; 
      color: #4cc4e6; 
      text-transform: uppercase; 
      letter-spacing: 0.08em; 
      margin-bottom: 4px; 
      display: block;
    }
    .genix-vault-card-balance { 
      font-size: 22px; 
      font-weight: 800; 
      letter-spacing: -0.5px; 
      color: #ffffff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    .genix-vault-card-bottom { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      font-size: 10px; 
      font-weight: 600; 
      color: #cbd5e1; 
      position: relative;
      z-index: 2;
    }
    
    /* Quick Actions Grid */
    .genix-vault-action-grid {
      display: flex; 
      justify-content: space-between;
      padding: 0 4px;
    }
    .genix-vault-action-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 45px;}
    .genix-vault-action-icon {
      width: 38px; height: 38px; background: #ffffff; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03); border: 1px solid #e2e8f0;
      transition: all 0.2s;
    }
    .genix-vault-action-btn:hover .genix-vault-action-icon { border-color: #4cc4e6; transform: translateY(-2px); }
    .genix-vault-action-icon svg { width: 16px; height: 16px; stroke: #5c68c6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .genix-vault-action-label { font-size: 8px; font-weight: 700; color: #0f172a; }

    /* Recent Transactions List */
    .genix-vault-txn-section { display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .genix-vault-txn-head { font-size: 11px; font-weight: 800; color: #0f172a; display: flex; justify-content: space-between; padding: 0 2px;}
    .genix-vault-txn-head span { color: #4cc4e6; font-weight: 700; font-size: 9px; }
    
    .genix-vault-txn-item {
      background: #ffffff; border-radius: 12px; padding: 10px;
      display: flex; justify-content: space-between; align-items: center;
      border: 1px solid #f1f5f9; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
    }
    .genix-vault-txn-left { display: flex; align-items: center; gap: 8px; }
    .genix-vault-txn-icon {
      width: 28px; height: 28px; background: #f0fdf4; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .genix-vault-txn-icon.red { background: #fef2f2; }
    .genix-vault-txn-icon svg { width: 14px; height: 14px; stroke: #10b981; stroke-width: 2; fill: none; }
    .genix-vault-txn-icon.red svg { stroke: #ef4444; }
    .genix-vault-txn-info h5 { font-size: 10px; font-weight: 700; color: #0f172a; margin-bottom: 2px; white-space: nowrap;}
    .genix-vault-txn-info p { font-size: 8px; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 4px; margin: 0;}
    
    /* Small Invoice Clip SVG */
    .genix-vault-clip-svg { width: 8px; height: 8px; stroke: #4cc4e6; }
    
    .genix-vault-txn-amt { font-size: 11px; font-weight: 800; color: #10b981; white-space: nowrap;}
    .genix-vault-txn-amt.deduct { color: #ef4444; }


    /* ── FLOATING STATS BOTTOM ── */
    .genix-vault-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-vault-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-vault-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-vault-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-vault-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-vault-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-vault-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-16px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.8); opacity: 0.5; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }

    @media (max-width: 950px) {
      .genix-vault-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-vault-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-vault-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-vault-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix-vault-hero-right { margin-top: 20px; }
      h1 { font-size: 26px; }
        .genix-vault-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
      
    }


    /* ======epr 360 ============================================================================================*/
    /* Modern Background Glowing Orbs */
    .genix-erp-360-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-erp-360-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-erp-360-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-erp-360-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1100px; 
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-erp-360-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 50px;
    }

    .genix-erp-360-hero-left { flex: 1; max-width: 500px; }

    .genix-erp-360-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-erp-360-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-erp-360-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-erp-360-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .genix-erp-360-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-erp-360-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .genix-erp-360-feature:hover .genix-erp-360-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .genix-erp-360-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-erp-360-feat-text p  { font-size: 12px; color: #0f172a; line-height: 1.5; font-weight: 500; }

    .genix-erp-360-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-erp-360-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-erp-360-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-erp-360-btn:hover::before { left: 100%; }
    .genix-erp-360-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-erp-360-btn:active { transform: scale(0.97); }

    .genix-erp-360-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── MODERN WEB DASHBOARD MOCKUP ── */
    .genix-erp-360-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 340px;
      height: 380px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    /* Glassmorphic Tap Pill */
    .genix-erp-360-tap-pill {
      position: absolute;
      top: -20px; right: -10px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .genix-erp-360-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-erp-360-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .genix-erp-360-platform-base {
      width: 280px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, transparent 70%);
      position: absolute;
      bottom: -15px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* Dashboard UI Container */
    .genix-erp-360-dashboard-ui {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 20px;
      border: 4px solid #f8fafc;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(0,0,0,0.05);
      display: flex;
      overflow: hidden;
      position: relative;
      z-index: 10;
    }

    /* Sidebar */
    .genix-erp-360-dash-sidebar {
      width: 60px;
      background: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      gap: 20px;
    }
    .genix-erp-360-dash-logo { width: 28px; height: 28px; background: linear-gradient(135deg, #4cc4e6, #5c68c6); border-radius: 8px; margin-bottom: 20px; }
    .genix-erp-360-nav-item { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; }
    .genix-erp-360-nav-item.active { background: #4cc4e6; box-shadow: 0 0 10px rgba(76, 196, 230, 0.4); }
    .genix-erp-360-nav-item svg { width: 12px; height: 12px; stroke: #ffffff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}

    /* Main Content */
    .genix-erp-360-dash-main {
      flex: 1;
      background: #f8fafc;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .genix-erp-360-dash-header {
      display: flex; justify-content: space-between; align-items: center;
    }
    .genix-erp-360-dash-title { font-size: 12px; font-weight: 800; color: #0f172a; }
    .genix-erp-360-dash-avatar { width: 24px; height: 24px; background: #e2e8f0; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

    /* Metric Cards */
    .genix-erp-360-metrics-row {
      display: flex; gap: 10px;
    }
    .metric-card {
      flex: 1; background: #ffffff; border-radius: 12px; padding: 12px;
      border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
    }
    .genix-erp-360-metric-label { font-size: 9px; color: #0f172a; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
    .genix-erp-360-metric-value { font-size: 16px; font-weight: 800; color: #0f172a; }
    .genix-erp-360-metric-value.cyan { color: 4cc4e6; }

    /* Chart Section */
    .genix-erp-360-chart-card {
      background: #ffffff; border-radius: 12px; padding: 12px;
      border: 1px solid #e2e8f0; flex: 1; display: flex; flex-direction: column;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
    }
    .genix-erp-360-chart-title { font-size: 10px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
    
    .genix-erp-360-bars {
      display: flex; align-items: flex-end; justify-content: space-between; flex: 1;
      padding-top: 10px; gap: 8px;
    }
    .genix-erp-360-bar {
      flex: 1; background: #e2e8f0; border-radius: 4px 4px 0 0; position: relative;
      animation: growBar 1.5s ease-out forwards; transform-origin: bottom;
    }
    .genix-erp-360-bar.active { background: linear-gradient(to top, #5c68c6, #4cc4e6); }
    .genix-erp-360-bar:nth-child(1) { height: 40%; }
    .genix-erp-360-bar:nth-child(2) { height: 70%; }
    .genix-erp-360-bar:nth-child(3) { height: 50%; }
    .genix-erp-360-bar:nth-child(4) { height: 100%; }
    .genix-erp-360-bar:nth-child(5) { height: 60%; }

    /* Recent List */
    .genix-erp-360-recent-list {
      background: #ffffff; border-radius: 12px; padding: 10px;
      border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 8px;
    }
    .genix-erp-360-r-item { display: flex; justify-content: space-between; align-items: center; }
    .genix-erp-360-r-left { display: flex; align-items: center; gap: 8px; }
    .genix-erp-360-r-dot { width: 8px; height: 8px; border-radius: 50%; }
    .genix-erp-360-r-dot.g { background: #10b981; }
    .genix-erp-360-r-dot.b { background: #4cc4e6; }
    .genix-erp-360-r-text { font-size: 9px; font-weight: 700; color: #475569; }
    .genix-erp-360-r-time { font-size: 8px; color: #0f172a; font-weight: 600; }

    /* ── FLOATING STATS BOTTOM ── */
    .genix-erp-360-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-erp-360-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-erp-360-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-erp-360-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-erp-360-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-erp-360-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-erp-360-stat-text p  { font-size: 11px; color: #0f172a; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }
    @keyframes growBar {
      0% { transform: scaleY(0); }
      100% { transform: scaleY(1); }
    }

    @media (max-width: 950px) {
      .genix-erp-360-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-erp-360-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-erp-360-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-erp-360-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix-erp-360-hero-right { margin-top: 40px; width: 100%; max-width: 360px; }
      h1 { font-size: 26px; }
        .genix-erp-360-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }

    /*====================================================================== Genix Workdesk===================== */

    /* Modern Background Glowing Orbs */
    .genix-workdesk-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-workdesk-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-workdesk-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-workdesk-card {
      background: rgba(255, 255, 255, 0.9);;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1100px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-workdesk-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 50px;
    }

    .genix-workdesk-hero-left { flex: 1; max-width: 500px; }

    .genix-workdesk-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-workdesk-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-workdesk-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-workdesk-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .genix-workdesk-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-workdesk-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .genix-workdesk-feature:hover .genix-workdesk-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .genix-workdesk-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-workdesk-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .genix-workdesk-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-workdesk-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-workdesk-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-workdesk-btn:hover::before { left: 100%; }
    .genix-workdesk-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-workdesk-btn:active { transform: scale(0.97); }

    .genix-workdesk-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── MODERN WEB DASHBOARD MOCKUP ── */
    .genix-workdesk-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 360px;
      height: 390px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    /* Glassmorphic Tap Pill */
    .genix-workdesk-tap-pill {
      position: absolute;
      top: -20px; right: -10px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .genix-workdesk-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-workdesk-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .genix-workdesk-platform-base {
      width: 300px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, transparent 70%);
      position: absolute;
      bottom: -15px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* Dashboard UI Container */
    .genix-workdesk-dashboard-ui {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 20px;
      border: 4px solid #f8fafc;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(0,0,0,0.05);
      display: flex;
      overflow: hidden;
      position: relative;
      z-index: 10;
    }

    /* Sidebar */
    .genix-workdesk-dash-sidebar {
      width: 60px;
      background: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      gap: 20px;
    }
    .genix-workdesk-dash-logo { width: 28px; height: 28px; background: linear-gradient(135deg, #4cc4e6, #5c68c6); border-radius: 8px; margin-bottom: 20px; }
    .genix-workdesk-nav-item { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; }
    .genix-workdesk-nav-item.active { background: #4cc4e6; box-shadow: 0 0 10px rgba(76, 196, 230, 0.4); }
    .genix-workdesk-nav-item svg { width: 12px; height: 12px; stroke: #ffffff; stroke-width: 2; fill: none; }

    /* Main Content */
    .genix-workdesk-dash-main {
      flex: 1;
      background: #f8fafc;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .genix-workdesk-dash-header {
      display: flex; justify-content: space-between; align-items: center;
    }
    .genix-workdesk-dash-title { font-size: 12px; font-weight: 800; color: #0f172a; }
    .genix-workdesk-dash-avatar { width: 24px; height: 24px; background: #e2e8f0; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

    /* Metric Cards */
    .genix-workdesk-metrics-row {
      display: flex; gap: 10px;
    }
    .genix-workdesk-metric-card {
      flex: 1; background: #ffffff; border-radius: 12px; padding: 12px;
      border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
    }
    .genix-workdesk-metric-label { font-size: 9px; color: #94a3b8; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
    .genix-workdesk-metric-value { font-size: 15px; font-weight: 800; color: #0f172a; }
    .genix-workdesk-metric-value.cyan { color: #4cc4e6; }

    /* Kanban Board Area */
    .genix-workdesk-kanban-board {
      display: flex; gap: 10px; flex: 1;
    }
    .genix-workdesk-kanban-col {
      flex: 1; background: #f1f5f9; border-radius: 12px; padding: 10px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .genix-workdesk-col-title { font-size: 9px; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
    
    /* Task Cards */
    .genix-workdesk-task-card {
      background: #ffffff; border-radius: 8px; padding: 10px;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); border: 1px solid #e2e8f0;
      animation: fadeUp 0.5s ease both;
    }
    .genix-workdesk-task-card.delay-1 { animation-delay: 0.2s; }
    .genix-workdesk-task-card.delay-2 { animation-delay: 0.4s; }

    .genix-workdesk-t-tag { display: inline-block; padding: 3px 6px; border-radius: 4px; font-size: 7px; font-weight: 800; margin-bottom: 6px; }
    .genix-workdesk-t-tag.high { background: #fee2e2; color: #ef4444; }
    .genix-workdesk-t-tag.med { background: #e0f2fe; color: #0284c7; }
    
    .genix-workdesk-t-title { font-size: 10px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
    
    .genix-workdesk-t-footer { display: flex; justify-content: space-between; align-items: center; }
    .genix-workdesk-t-avatars { display: flex; }
    .genix-workdesk-t-av { width: 14px; height: 14px; border-radius: 50%; background: #5c68c6; border: 1px solid #fff; margin-left: -4px; }
    .genix-workdesk-t-av:first-child { margin-left: 0; background: #4cc4e6; }
    .genix-workdesk-t-status { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; color: #94a3b8; }
    .genix-workdesk-t-status svg { width: 10px; height: 10px; stroke: #10b981; stroke-width: 3; fill: none; }

    /* ── FLOATING STATS BOTTOM ── */
    .genix-workdesk-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-workdesk-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-workdesk-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-workdesk-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-workdesk-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-workdesk-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-workdesk-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }

    @media (max-width: 950px) {
      .genix-workdesk-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-workdesk-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-workdesk-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-workdesk-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix-workdesk-hero-right { margin-top: 40px; width: 100%; max-width: 360px; }
      h1 { font-size: 26px; }
        .genix-workdesk-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }

    /* ===========genix habit  */
        /* Modern Background Glowing Orbs */
    .genix-hire-orbit-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-hire-orbit-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-hire-orbit-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-hire-orbit-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1100px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-hire-orbit-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 50px;
    }

    .genix-hire-orbit-hero-left { flex: 1; max-width: 500px; }

    .genix-hire-orbit-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-hire-orbit-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-hire-orbit-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-hire-orbit-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .genix-hire-orbit-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-hire-orbit-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }
    .genix-hire-orbit-feature:hover .genix-hire-orbit-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }

    .genix-hire-orbit-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-hire-orbit-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .genix-hire-orbit-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-hire-orbit-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-hire-orbit-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-hire-orbit-btn:hover::before { left: 100%; }
    .genix-hire-orbit-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-hire-orbit-btn:active { transform: scale(0.97); }

    .genix-hire-orbit-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── MODERN WEB DASHBOARD MOCKUP ── */
    .genix-hire-orbit-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 340px;
      height: 380px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    /* Glassmorphic Tap Pill */
    .genix-hire-orbit-tap-pill {
      position: absolute;
      top: -20px; right: -10px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .genix-hire-orbit-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-hire-orbit-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    /* Platform shadow */
    .genix-hire-orbit-platform-base {
      width: 280px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, transparent 70%);
      position: absolute;
      bottom: -15px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* Dashboard UI Container */
    .genix-hire-orbit-dashboard-ui {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 20px;
      border: 4px solid #f8fafc;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(0,0,0,0.05);
      display: flex;
      overflow: hidden;
      position: relative;
      z-index: 10;
    }

    /* Sidebar */
    .genix-hire-orbit-dash-sidebar {
      width: 60px;
      background: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      gap: 20px;
    }
    .genix-hire-orbit-dash-logo { width: 28px; height: 28px; background: linear-gradient(135deg, #4cc4e6, #5c68c6); border-radius: 8px; margin-bottom: 20px; }
    .genix-hire-orbit-nav-item { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; }
    .genix-hire-orbit-nav-item.active { background: #4cc4e6; box-shadow: 0 0 10px rgba(76, 196, 230, 0.4); }
    .genix-hire-orbit-nav-item svg { width: 12px; height: 12px; stroke: #ffffff; stroke-width: 2; fill: none; }

    /* Main Content */
    .genix-hire-orbit-dash-main {
      flex: 1;
      background: #f8fafc;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .genix-hire-orbit-dash-header {
      display: flex; justify-content: space-between; align-items: center;
    }
    .genix-hire-orbit-dash-title { font-size: 12px; font-weight: 800; color: #0f172a; }
    .genix-hire-orbit-dash-avatar { width: 24px; height: 24px; background: #e2e8f0; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

    /* Metric Cards */
    .genix-hire-orbit-metrics-row {
      display: flex; gap: 10px;
    }
    .genix-hire-orbit-metric-card {
      flex: 1; background: #ffffff; border-radius: 12px; padding: 12px;
      border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
    }
    .genix-hire-orbit-metric-label { font-size: 9px; color: #94a3b8; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
    .genix-hire-orbit-metric-value { font-size: 16px; font-weight: 800; color: #0f172a; }
    .genix-hire-orbit-metric-value.cyan { color: #4cc4e6; }

    /* Chart Section */
    .genix-hire-orbit-chart-card {
      background: #ffffff; border-radius: 12px; padding: 12px;
      border: 1px solid #e2e8f0; flex: 1; display: flex; flex-direction: column;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
    }
    .genix-hire-orbit-chart-title { font-size: 10px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
    
    .genix-hire-orbit-bars {
      display: flex; align-items: flex-end; justify-content: space-between; flex: 1;
      padding-top: 10px; gap: 8px;
    }
    .genix-hire-orbit-bar {
      flex: 1; background: #e2e8f0; border-radius: 4px 4px 0 0; position: relative;
      animation: growBar 1.5s ease-out forwards; transform-origin: bottom;
    }
    .genix-hire-orbit-bar.active { background: linear-gradient(to top, #5c68c6, #4cc4e6); }
    .genix-hire-orbit-bar:nth-child(1) { height: 60%; }
    .genix-hire-orbit-bar:nth-child(2) { height: 40%; }
    .genix-hire-orbit-bar:nth-child(3) { height: 90%; }
    .genix-hire-orbit-bar:nth-child(4) { height: 100%; }
    .genix-hire-orbit-bar:nth-child(5) { height: 75%; }

    /* Recent List */
    .genix-hire-orbit-recent-list {
      background: #ffffff; border-radius: 12px; padding: 10px;
      border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 8px;
    }
    .genix-hire-orbit-r-item { display: flex; justify-content: space-between; align-items: center; }
    .genix-hire-orbit-r-left { display: flex; align-items: center; gap: 8px; }
    .genix-hire-orbit-r-dot { width: 8px; height: 8px; border-radius: 50%; }
    .genix-hire-orbit-r-dot.g { background: #10b981; }
    .genix-hire-orbit-r-dot.b { background: #5c68c6; }
    .genix-hire-orbit-r-text { font-size: 9px; font-weight: 700; color: #475569; }
    .genix-hire-orbit-r-time { font-size: 8px; color: #94a3b8; font-weight: 600; }

    /* ── FLOATING STATS BOTTOM ── */
    .genix-hire-orbit-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-hire-orbit-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-hire-orbit-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-hire-orbit-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-hire-orbit-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-hire-orbit-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-hire-orbit-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }
    @keyframes growBar {
      0% { transform: scaleY(0); }
      100% { transform: scaleY(1); }
    }

    @media (max-width: 950px) {
      .genix-hire-orbit-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-hire-orbit-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-hire-orbit-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-hire-orbit-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix--hero-right { margin-top: 40px; width: 100%; max-width: 360px; }
      h1 { font-size: 26px; }
          .genix-hire-orbit-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }

    /* ===============genix shield -================================================================*/

        /* Modern Background Glowing Orbs */
    .genix-shield-bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.6;
    }
    .genix-shield-orb-1 { width: 500px; height: 500px; background: rgba(76, 196, 230, 0.3); top: -100px; right: -50px; }
    .genix-shield-orb-2 { width: 400px; height: 400px; background: rgba(92, 104, 198, 0.25); bottom: -100px; left: -100px; }

    .genix-shield-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      max-width: 1040px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.05), 0 0 40px rgba(92, 104, 198, 0.05);
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }

    /* ── HERO ── */
    .genix-shield-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px;
      gap: 40px;
    }

    .genix-shield-hero-left { flex: 1; max-width: 480px; }

    .genix-shield-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76, 196, 230, 0.1);
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 8px 16px;
      border-radius: 30px;
      margin-bottom: 24px;
      border: 1px solid rgba(76, 196, 230, 0.2);
      animation: fadeUp 0.6s ease both;
    }

    h1 {
      font-size: 46px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1px;
      animation: fadeUp 0.6s 0.1s ease both;
    }
    
    .genix-shield-text-gradient {
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .genix-shield-desc {
      font-size: 16px;
      color: #475569;
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 500;
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .genix-shield-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 40px;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .genix-shield-feature { display: flex; align-items: flex-start; gap: 14px; }

    .genix-shield-feat-icon {
      width: 44px; height: 44px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid rgba(76, 196, 230, 0.2);
      box-shadow: 0 8px 16px rgba(76, 196, 230, 0.08);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .genix-shield-feature:hover .genix-shield-feat-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(76, 196, 230, 0.2);
      border-color: #4cc4e6;
    }
    .genix-shield-feat-icon svg { width: 20px; height: 20px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .genix-shield-feat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .genix-shield-feat-text p  { font-size: 12px; color: #94a3b8; line-height: 1.5; font-weight: 500; }

    .genix-shield-btn-wrap { animation: fadeUp 0.6s 0.4s ease both; }

    .genix-shield-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #5c68c6 0%, #4cc4e6 100%);
      color: #ffffff;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 700;
      padding: 16px 32px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 10px 24px rgba(76, 196, 230, 0.3);
      position: relative;
      overflow: hidden;
    }
    .genix-shield-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: 0.5s;
    }
    .genix-shield-btn:hover::before { left: 100%; }
    .genix-shield-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 104, 198, 0.4); }
    .genix-shield-btn:active { transform: scale(0.97); }

    .genix-shield-btn-arrow {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }

    /* ── API WIDGET MOCKUP ── */
    .genix-shield-hero-right {
      flex-shrink: 0;
      position: relative;
      width: 320px;
      height: 440px;
      animation: floatSmooth 6s ease-in-out infinite;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .genix-shield-tap-pill {
      position: absolute;
      top: 20px; right: -20px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 30px;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      animation: pillFloat 4s 0.5s ease-in-out infinite;
      z-index: 20;
    }
    .genix-shield-tap-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: dotBlink 1.5s ease-in-out infinite; box-shadow: 0 0 12px rgba(16,185,129,0.5); }
    .genix-shield-tap-pill span { font-size: 11px; font-weight: 800; color: #0f172a; }

    .genix-shield-platform-base {
      width: 260px; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 70%);
      position: absolute;
      bottom: 5px; left: 50%;
      transform: translateX(-50%);
      animation: shadowPulse 6s ease-in-out infinite;
    }

    /* Verification Console UI */
    .genix-shield-api-modal {
      width: 100%;
      height: 400px;
      background: #ffffff; 
      border-radius: 24px;
      border: 4px solid #f1f5f9;
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.15), inset 0 0 0 1px rgba(0,0,0,0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 10;
    }

    .genix-shield-modal-header {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .genix-shield-modal-header::before {
      content: ''; position: absolute; right: -10px; top: -10px;
      width: 60px; height: 60px; border-radius: 50%;
      background: radial-gradient(circle, rgba(76, 196, 230, 0.3) 0%, transparent 70%);
    }
    .genix-shield-modal-header-left { position: relative; z-index: 2; }
    .genix-shield-modal-title { font-size: 13px; font-weight: 800; color: #ffffff; margin-bottom: 4px;}
    .genix-shield-api-status { font-size: 9px; font-weight: 700; color: #10b981; display: flex; align-items: center; gap: 4px; }
    .genix-shield-api-status::before { content:''; width: 6px; height: 6px; background:#10b981; border-radius:50%; display:inline-block; }
    
    .genix-shield-wallet-box {
      text-align: right; position: relative; z-index: 2;
    }
    .genix-shield-wallet-label { font-size: 8px; color: #94a3b8; font-weight: 700; text-transform: uppercase; margin-bottom: 2px;}
    .genix-shield-wallet-bal { font-size: 14px; font-weight: 800; color: #ffffff; display: flex; align-items: center; gap: 2px; justify-content: flex-end;}
    /* Clean Rupee SVG */
    .rupee-svg { width: 12px; height: 12px; stroke: #ffffff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    .genix-shield-screen-content {
      flex: 1;
      background: #f8fafc;
      position: relative;
    }

    /* ── ANIMATED SCREEN STATES ── */
    .genix-shield-screen-state {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      padding: 24px;
      opacity: 0;
      display: flex;
      flex-direction: column;
    }

    /* State 1: Scan & Upload */
    .genix-shield-state-scan { animation: showSetup 10s infinite; align-items: center; text-align: center; }
    
    .genix-shield-doc-preview {
      width: 160px; height: 100px;
      background: #ffffff; border: 2px dashed #cbd5e1; border-radius: 12px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative; overflow: hidden; margin-bottom: 24px; margin-top: 20px;
      box-shadow: 0 8px 24px rgba(15,23,42,0.03);
    }
    .genix-shield-doc-preview svg { width: 32px; height: 32px; stroke: #4cc4e6; stroke-width: 1.5; fill: none; margin-bottom: 8px;}
    .genix-shield-doc-preview p { font-size: 9px; font-weight: 700; color: #94a3b8; }
    
    /* Scanner Animation Line */
    .genix-shield-scanner-line {
      position: absolute; top: 0; left: 0; width: 100%; height: 4px;
      background: #4cc4e6; box-shadow: 0 0 10px #4cc4e6;
      animation: scanDoc 2s linear infinite alternate;
    }

    .genix-shield-status-title { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
    .genix-shield-status-sub { font-size: 11px; font-weight: 600; color: #94a3b8; line-height: 1.5; }

    /* State 2 & 3: Processing & Success */
    .genix-shield-state-center { justify-content: center; align-items: center; text-align: center; }
    .genix-shield-state-processing { animation: showProcessing 10s infinite; }
    .genix-shield-state-success { animation: showSuccess 10s infinite; }

    .genix-shield-spinner {
      width: 48px; height: 48px;
      border: 4px solid rgba(76, 196, 230, 0.2);
      border-top-color: #4cc4e6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20px;
    }
    
    /* Success / Verified Icon */
    .genix-shield-success-icon {
      width: 60px; height: 60px; background: #f0fdf4; border-radius: 50%; border: 2px solid #10b981;
      display: flex; justify-content: center; align-items: center; 
      margin-bottom: 20px; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
    }
    .genix-shield-success-icon svg { width: 28px; height: 28px; stroke: #10b981; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-shield-data-box {
      background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; width: 100%; text-align: left; margin-top: 16px;
    }
    .genix-shield-data-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 10px; }
    .genix-shield-data-row:last-child { margin-bottom: 0;}
    .genix-shield-data-label { color: #94a3b8; font-weight: 600; }
    .data-val { color: #0f172a; font-weight: 800; }

    /* ── AUTOMATED LOOPING ANIMATIONS (10s Cycle) ── */
    @keyframes showSetup {
      0%, 40% { opacity: 1; z-index: 2; transform: translateY(0); }
      42%, 100% { opacity: 0; z-index: 0; transform: translateY(-10px); }
    }
    @keyframes showProcessing {
      0%, 40% { opacity: 0; z-index: 0; transform: translateY(10px); }
      42%, 65% { opacity: 1; z-index: 2; transform: translateY(0); }
      67%, 100% { opacity: 0; z-index: 0; transform: translateY(-10px); }
    }
    @keyframes showSuccess {
      0%, 65% { opacity: 0; z-index: 0; transform: scale(0.9); }
      67%, 96% { opacity: 1; z-index: 2; transform: scale(1); }
      98%, 100% { opacity: 0; z-index: 0; transform: scale(0.9); }
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }
    @keyframes scanDoc {
      0% { top: 0%; }
      100% { top: 96%; }
    }

    /* ── FLOATING STATS BOTTOM ── */
    .genix-shield-stats-container {
      padding: 0 60px 50px;
      display: flex;
      gap: 20px;
      animation: fadeUp 0.6s 0.5s ease both;
    }

    .genix-shield-stat-card {
      flex: 1;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      align-items: start;
      gap: 16px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(241, 245, 249, 1);
      transition: all 0.3s ease;
    }
    .genix-shield-stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(76, 196, 230, 0.1);
      border-color: rgba(76, 196, 230, 0.3);
    }

    .genix-shield-stat-icon {
      width: 46px; height: 46px;
      border-radius: 12px;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .genix-shield-stat-icon svg { width: 22px; height: 22px; stroke: #4cc4e6; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
    
    .genix-shield-stat-text h4 { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.3; }
    .genix-shield-stat-text p  { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 500; }

    /* ── KEYFRAMES ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatSmooth {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-12px); }
    }
    @keyframes shadowPulse {
      0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
      50%       { transform: translateX(-50%) scaleX(0.85); opacity: 0.6; }
    }
    @keyframes pillFloat {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }

    @media (max-width: 900px) {
      .genix-shield-hero { flex-direction: column; text-align: center; padding: 40px 24px; }
      .genix-shield-hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
      .genix-shield-features-grid { grid-template-columns: 1fr; text-align: left; }
      .genix-shield-stats-container { flex-direction: column; padding: 0 24px 40px; }
      .genix-shield-hero-right { margin-top: 30px; }
      h1 { font-size: 26px; }
       .genix-shield-stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    transition: all 0.3s ease;
}
    }