:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#94a3b8;
      --accent1:#07a192;
      --accent2:#02a79c;
      --glass: rgba(255,255,255,0.04);
      --glass-2: rgba(255,255,255,0.02);
      --glass-3: rgba(7,161,146,0.08);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    html,body {
        height:100%;
        margin:0;
        color: #e6eef6;
    }
    a{color:inherit;text-decoration:none}
    .container{
      margin-top: -19px;
      padding:28px}

    /* Header */
    header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .logo{display:flex;align-items:center;gap:12px}
    .logo .mark{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent2),var(--accent1));display:flex;align-items:center;justify-content:center;font-weight:800;color:white;box-shadow:0 4px 18px rgba(2,167,156,0.2)}
    .btn{background:linear-gradient(90deg,var(--accent2),var(--accent1));padding:10px 16px;border-radius:10px;font-weight:600;color:#032;box-shadow:0 8px 30px rgba(3,150,140,0.12)}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center;padding:28px 0}
    .hero-card-crm-details-page {
        border-radius:14px;
        padding:28px;
        backdrop-filter: blur(6px);box-shadow:0 6px 30px rgba(2,6,23,0.6);
        border:1px solid rgba(255,255,255,0.03);
        background: var(--card-gradient)
    }
    .h-title{font-size:34px;margin:0 0 12px 0;line-height:1.05}
    .h-lead{color: #feff00;margin-bottom:16px}
    .hero-features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .feature-pill{background:var(--glass-2);padding:10px;border-radius:10px;font-weight:600;display:flex;gap:10px;align-items:center}
    .hero-visual{display:flex;flex-direction:column;gap:12px}
    .mock{height:221px;padding:5px;border-radius:16px;
      background:linear-gradient(180deg, #07b4a1, #00b976);
      display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);}

    /* Pricing */
    .pricing-wrap{
      margin-top:18px;
      /* background:linear-gradient(180deg, rgba(255,255,255,0.02), */
      background: var(--price-container);
      padding:18px;
      border-radius:14px
    }
    .toggle{
      display:flex;align-items:center;
      gap:8px;background:var(--glass);
      padding:6px;border-radius:999px;
      width:max-content;
      margin: 7px 19px -21px;
    }
    .amount {
      color: white;
    }
   
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
    .card{background:linear-gradient(180deg,var(--card),#071123);padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 40px rgba(2,6,23,0.6);display:flex;flex-direction:column;gap:14px;transition:transform .22s ease,box-shadow .22s ease}
    .card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(2,6,23,0.75)}
    .card .label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
    .price{font-size:28px;font-weight:800}
    .user-count{font-weight:700;color:var(--accent1)}
    .features-list{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}
    .cta{margin-top:auto}
    .expand-btn{background:transparent;border:0;color:var(--accent1);cursor:pointer;font-size:13px;text-align:left;padding:0;margin-top:6px}
    .more-features{display:none;margin-top:8px}
    .more-features.active{display:block}
    .ghost{border:1px solid rgba(255,255,255,0.06);background:transparent;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:700}

    /* Comparison */
    .compare {
      margin-top:26px;
      padding:18px;
      border-radius:12px;
      background: linear-gradient(133deg, #048842, #01582ed9, #036d79, #009a90, #9fa02a00);
      /* rgba(2,167,156,0.02)); */
      border:1px solid rgba(255,255,255,0.02)
    }
    .compare table{width:100%;border-collapse:collapse}
    .compare th, .compare td{padding:10px;text-align:left;border-bottom:1px dashed rgba(255,255,255,0.03)}

    /* Footer */
    .last-container {
      margin-top:28px;padding:18px;color:var(--muted);display:flex;justify-content:space-between;
      align-items:center;
      color: orangered;
    }

    
 /* Payment Term & User dropdown styling */
.container-row {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.select-row {
  display: flex;
  gap: 20px;
  margin: 0px 48px 9px;
}

.container-row select, .select-row select {
  width: 200px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #02a79c;
  background: #0b1220;
  color: #e6eef6;
  font-size: 14px;
}

.container-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.crm-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 16px;
  margin-top: 20px;
}
.crm-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass);
  padding: 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.crm-feature img {
  width: 32px;
  height: 32px;
}
.crm-feature span {
  font-weight: 600;
}
.crm-feature:hover {
  background: var(--glass-3);
  transform: translateY(-3px);
}
.key-features-container {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
 
.slider-container {
  position: relative;
  max-width: 600px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Slider Track */
.slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

/* Images */
.slider-track img {
  width: 100%;
  flex-shrink: 0;
  border-radius: 12px;
}

/* Navigation Buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Dots */
.dots {
  text-align: center;
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background: rgba(255,255,255,0.9);
}
.pricing-setting-container {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.button-last-container {
    display:flex;
    gap:12px;
    align-items:center;
    cursor:pointer;
    justify-content: space-between;
}
.last-container-massage {
    font-size: 15px;
    margin-bottom: 15px;
}
/* Responsive */
@media(max-width:1000px){.hero{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.mock{height:200px}}
@media(max-width:769px){.cards{grid-template-columns:1fr}.container{padding:18px}.h-title{font-size:26px}.hero-card{padding:20px}.slider-container{max-width: 712px;}.mock{height:342px}
  .h-lead {
      margin-bottom: 0px;
  }
  .toggle {
    margin: 0px 0px 7px;
  }
}
@media (max-width: 575px) {
  .select-row select {
    width: 140px;
  }
  .select-row {
    gap: 15px;
    margin: 0px 0px 18px;
  }
  .h-lead {
    color: #feff00;
    margin-bottom: 0px;
    margin-top: 31px;
  }
  .mock {
    height: 227px;
  }
    .last-container {
        display: block;
    }
}
@media (max-width: 420px) {
  .select-row select {
    width: 110px;
  }
  .select-row {
    gap: 10px;
    margin: 0px 12px 18px;
  }
  .key-features-container {
    grid-template-columns:repeat(2,1fr);
    font-size: 12px;
    }
}
@media (max-width: 375px) {
    .pricing-setting-container {
      display:block;
    }
    .compare {
    padding: 10px;
    }
    .compare table {
        font-size: 11px;
    }
    .mock {
        height: 157px;
    }
    .compare td, .compare td {
    padding: 5px;
    }
    .hero-card-crm-details-page h2 {
        font-size: 15px;
        color: var(--card-heading)
    }


    
}
@media (max-width: 320px) {
    .select-row select {
      width: 110px;
    }
    .select-row {
      gap: 10px;
      margin: 0px 12px 18px;
    }
    .pricing-setting-container {
      display:block;
    }
    .toggle {
        margin: 7px -14px -21px;
    }
    .compare table {
        font-size: 10px;
    }
    .mock {
        height: 138px;
    }
}