:root {
      /* Light Theme Palette (enforced) */
      --primary: #3b82f6;
      --primary-dark: #2563eb;
      --secondary: #7c3aed;
      --dark: #1e293b;
      --darker: #0f172a;
      --light: #ffffff;
      --gray: #475569;
      --light-gray: #f1f5f9;

      /* Backgrounds and Glass Effects */
      --bg-gradient: radial-gradient(circle at top right, #f0f9ff, #e0f2fe);
      --glass-bg: rgba(255, 255, 255, 0.7);
      --glass-border: rgba(209, 213, 219, 0.5);

      /* Accents */
      --success: #56d364;
      --warning: #e3b341;

      /* Shadows and Effects */
      --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
      --transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--dark);
      /* background: var(--bg-gradient); */
      line-height: 1.6;
      overflow-x: hidden;
      transition: background 0.8s ease;
      min-height: 100vh;
      position: relative;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
      z-index: -1;
      opacity: 0.8;
    }

    .container {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 30px;
    }

    body > header >.container {
      max-width: 100%;
  }

    /* Header Styles */
    header {
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--glass-border);
      position: sticky;
      top: 0;
      z-index: 99999;
      transition: all 0.4s ease;
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
    }

    .logo {
      font-size: 28px;
      font-weight: 800;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-links {
      display: flex;
      gap: 25px;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--dark);
      font-weight: 500;
      transition: var(--transition);
      position: relative;
      padding: 8px 0;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: var(--transition);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-links a:hover {
      color: var(--primary);
    }

    .auth-buttons {
      display: flex;
      gap: 15px;
    }

    .btn {
      padding: 12px 28px;
      border-radius: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      border: none;
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      z-index: -1;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .btn:hover::before {
      opacity: 1;
      background: black;
    }

    body > header .btn.btn-outline {
      color: white;
    }

    body > header .btn.btn-outline::before {
      opacity: 1;
      background: black;
    }

    .btn-outline {
      background: transparent;
      border: 2px solid var(--light-gray);
      color: var(--dark);
    }

    .btn-outline:hover {
      border-color: transparent;
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
    }

    .btn-primary {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
    }

    .btn-lg {
      padding: 16px 36px;
      font-size: 18px;
      border-radius: 14px;
    }


    /* Hero image section */
    /* Hero Image Container */
.hero-image {
  flex: 1;
  position: relative;
}

/* Dashboard Component */
.hero-image .dashboard {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: var(--transition);
  background: white;
  padding: 1.5rem;
  border: 1px solid var(--light-gray);
}

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

/* Dashboard Header */
.hero-image .dashboard-header {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.hero-image .dashboard-title {
  font-weight: 600;
  color: var(--light);
}

/* Dashboard Grid */
.hero-image .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Dashboard Cards */
.hero-image .dashboard-card {
  background: var(--light);
  border-radius: 8px;
  padding: 1rem;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: var(--transition);
}

.hero-image .dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hero-image .dashboard-card i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.hero-image .dashboard-card h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.hero-image .dashboard-card p {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0;
}


    /* Hero Section */
    .hero {
      padding: 4% 0 4%;
      position: relative;
      overflow: hidden;
    }

    .hero-content {
      display: flex;
      align-items: baseline;
      position: relative;
      z-index: 1;
      gap: 60px;
    }

    .hero-text {
      flex: 1;
    }

    .hero-visual {
      flex: 1;
      display: flex;
      justify-content: center;
      perspective: 1000px;
    }

    .hero h1 {
      font-size: 64px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 24px;
      color: var(--darker);
      background: linear-gradient(90deg, var(--darker), var(--primary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      font-size: 22px;
      color: var(--gray);
      margin-bottom: 40px;
      max-width: 600px;
    }

    .hero-buttons {
      display: flex;
      gap: 20px;
      margin-bottom: 40px;
    }

    .trust-badge {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .trust-badge .logos {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .trust-badge .logo-item {
      width: 60px;
      height: 60px;
      background: var(--glass-bg);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--primary);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      font-size: 24px;
      transition: var(--transition);
      cursor: pointer;
    }

    .trust-badge .logo-item:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 12px 25px rgba(37, 99, 235, 0.15);
    }

    /* Ensure external brand logos fit well */
    .trust-badge .logo-item img {
      max-width: 70%;
      max-height: 70%;
      object-fit: contain;
      filter: grayscale(100%) opacity(0.85);
      transition: filter var(--transition), transform var(--transition), opacity var(--transition);
    }

    .trust-badge .logo-item:hover img {
      filter: grayscale(0%) opacity(1);
      transform: scale(1.02);
    }

    /* Dashboard Visualization */
    .dashboard {
      width: 100%;
      max-width: 600px;
      height: 450px;
      background: var(--glass-bg);
      border-radius: 24px;
      box-shadow: var(--card-shadow);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: rotateX(5deg) rotateY(-10deg);
      transform-style: preserve-3d;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      transition: var(--transition);
    }

    .dashboard:hover {
      transform: rotateX(3deg) rotateY(-5deg) translateY(-10px);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }

    .dashboard-header {
      height: 60px;
      background: linear-gradient(135deg, #0f172a, #1e293b);
      display: flex;
      align-items: center;
      padding: 0 25px;
      gap: 12px;
      border-bottom: 1px solid var(--glass-border);
    }

    .dashboard-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }

    .dashboard-dot:nth-child(1) {
      background: #ef4444;
    }

    .dashboard-dot:nth-child(2) {
      background: #f59e0b;
    }

    .dashboard-dot:nth-child(3) {
      background: #10b981;
    }

    .dashboard-body {
      flex: 1;
      padding: 25px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .dashboard-row {
      display: flex;
      gap: 20px;
    }

    .dashboard-card {
      background: var(--glass-bg);
      border-radius: 16px;
      height: 100px;
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      transition: var(--transition);
    }

    .dashboard-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.15);
    }

    .dashboard-card.large {
      height: 200px;
    }

    .dashboard-chart {
      background: linear-gradient(90deg, rgba(219, 234, 254, 0.2) 0%, rgba(237, 233, 254, 0.2) 100%);
      height: 100%;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--glass-border);
    }

    .chart-bar {
      position: absolute;
      bottom: 0;
      width: 24px;
      background: var(--primary);
      border-radius: 8px 8px 0 0;
      transition: height 1s ease-in-out;
    }

    /* Section Styling */
    section {
      padding: 20px 0;
      position: relative;
    }

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

    .section-header h2 {
      font-weight: 800;
      color: transparent;
      font-size: 3.5rem;
      background: linear-gradient(to right, #fd4f91, #6796fd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

    .section-header p {
      font-size: 20px;
      color: #747474;
    }

    /* Features Section */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
      text-align: center;
    }

    .feature-card {
      background: white;
      border-radius: 16px;
      padding: 2rem;
      box-shadow: var(--card-shadow);
      transition: var(--transition);
      transform: perspective(1000px) rotateX(0) rotateY(0) rotateZ(0) translateZ(0);
      border: 1px solid var(--light-gray);
      position: relative;
      overflow: hidden;
    }

    .feature-card:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
    }

    .feature-card:hover {
      transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) rotateZ(0.5deg) translateZ(10px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }

    .feature-icon {
      font-size: 3rem;
      margin-bottom: 1.5rem;
      color: var(--primary);
    }

    .feature-card h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .feature-card p {
      color: var(--gray);
      margin-bottom: 1.5rem;
    }

    /* Use Cases */
    .use-cases {
      background: var(--glass-bg);
      border-radius: 40px;
      margin: 40px;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
    }

    .use-cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
    }

    .use-case-card {
      background: var(--glass-bg);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transform-style: preserve-3d;
      transition: var(--transition);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
    }

    .use-case-card:hover {
      transform: translateY(-10px) rotateX(5deg);
    }

    .use-case-header {
      padding: 30px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
    }

    .use-case-body {
      padding: 30px;
    }

    .use-case-body ul {
      list-style: none;
    }

    .use-case-body li {
      padding: 14px 0;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 18px;
      position: relative;
      padding-left: 30px;
    }

    .use-case-body li::before {
      content: "✓";
      color: var(--success);
      font-weight: bold;
      position: absolute;
      left: 0;
      top: 14px;
      font-size: 20px;
    }

    /* NEW: About Section */
    .about-section {
      background: var(--glass-bg);
      border-radius: 40px;
      margin: 40px;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .about-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .about-text {
      padding: 40px;
    }

    .about-visual {
      position: relative;
      height: 100%;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .visual-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .visual-circle {
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(37, 99, 235, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(37, 99, 235, 0.2);
      animation: pulse 6s infinite ease-in-out;
    }

    .visual-circle:nth-child(1) {
      top: 20%;
      left: 20%;
      background: rgba(124, 58, 237, 0.1);
      border-color: rgba(124, 58, 237, 0.2);
      animation-delay: 0s;
    }

    .visual-circle:nth-child(2) {
      top: 40%;
      left: 50%;
      background: rgba(86, 211, 100, 0.1);
      border-color: rgba(86, 211, 100, 0.2);
      animation-delay: -1s;
    }

    .visual-circle:nth-child(3) {
      top: 60%;
      left: 30%;
      background: rgba(227, 179, 65, 0.1);
      border-color: rgba(227, 179, 65, 0.2);
      animation-delay: -2s;
    }

    .visual-circle i {
      font-size: 48px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .benefit-list {
      margin-top: 30px;
    }

    .benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 20px;
      padding: 15px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 16px;
      transition: var(--transition);
    }

    .benefit-item:hover {
      transform: translateX(10px);
      background: rgba(255, 255, 255, 0.8);
    }

    .benefit-icon {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .benefit-icon i {
      color: white;
      font-size: 20px;
    }

    .benefit-content h4 {
      margin-bottom: 5px;
      font-size: 18px;
    }

    /* NEW: How It Works Section */
    .how-it-works {
      background: var(--glass-bg);
      border-radius: 40px;
      margin: 40px;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      counter-reset: step-counter;
    }

    .process-step {
      position: relative;
      padding: 40px 30px;
      background: var(--glass-bg);
      border-radius: 24px;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      transition: var(--transition);
      counter-increment: step-counter;
    }

    .process-step:hover {
      transform: translateY(-10px);
      background: rgba(255, 255, 255, 0.15);
    }

    .process-step::before {
      content: counter(step-counter);
      position: absolute;
      top: -25px;
      left: 30px;
      width: 50px;
      height: 50px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      z-index: 2;
    }

    .process-step h3 {
      font-size: 24px;
      margin-bottom: 20px;
      padding-top: 10px;
    }

    .process-step ul {
      list-style: none;
      padding-left: 0;
    }

    .process-step li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 15px;
    }

    .process-step li::before {
      content: "•";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--primary);
      font-size: 24px;
      line-height: 1;
    }

    .step-outcome {
      margin-top: 28px;
      padding: 28px 32px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      box-shadow: var(--card-shadow);
    }

    .step-outcome h4 {
      margin: 0 0 10px 0;
      font-weight: 800;
      color: var(--dark);
    }

    .step-outcome ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px 18px;
    }

    .step-outcome li {
      position: relative;
      padding-left: 24px;
      color: var(--dark);
    }

    .step-outcome li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--success);
      font-weight: 700;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(37, 99, 235, 0);
      }
    }

    /* Pricing */

    section#pricing {
      margin-top: 2rem;
    }

    section#pricing .section-header {
      max-width: 1500px;
    }

    section#pricing .section-header h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 3.5rem;
      background: linear-gradient(to right, var(--accent-light), var(--primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 0.5rem;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
    }

    .pricing-card {
      background: var(--glass-bg);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      position: relative;
      transition: var(--transition);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      transform-style: preserve-3d;
    }

    .pricing-card:hover {
      transform: translateY(-15px) rotateY(5deg);
    }

    .pricing-card.popular {
      transform: scale(1.05) translateZ(20px);
      z-index: 2;
      border: 2px solid var(--primary);
    }

    .pricing-card.popular:hover {
      transform: scale(1.05) translateY(-15px) rotateY(5deg);
    }

    .pricing-card.popular::after {
      content: "MOST POPULAR";
      position: absolute;
      top: 20px;
      right: -35px;
      background: var(--primary);
      color: white;
      padding: 8px 40px;
      font-size: 14px;
      font-weight: 700;
      transform: rotate(45deg);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .pricing-header {
      padding: 40px 20px;
      text-align: center;
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border-bottom: 1px solid var(--glass-border);
    }

    .pricing-header h3 {
      font-size: 24px;
      margin-bottom: 15px;
      color: var(--light);
    }

    .pricing-price {
      font-weight: 800;
      margin-bottom: 5px;
      color: transparent;
      font-size: 3.5rem;
      background: linear-gradient(to right, var(--accent-light), var(--primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

    .pricing-period {
      color: #cbcbcb;
      font-size: 16px;
    }

    .pricing-features {
      padding: 30px;
      border-bottom: 1px solid var(--glass-border);
    }

    .pricing-features ul {
      list-style: none;
    }

    .pricing-features li {
      padding: 12px 0;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 17px;
    }

    .pricing-features li i {
      color: var(--success);
      font-size: 20px;
    }

    .pricing-footer {
      padding: 30px;
      text-align: center;
    }

    /* Testimonials */
    .testimonials {
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      margin-top: 4rem;
      padding-top: 3rem;
      padding-bottom: 3rem;
  }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 40px;
    }

    .testimonial-card {
      background: var(--light);
      border-radius: 24px;
      padding: 40px;
      box-shadow: var(--card-shadow);
      position: relative;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      transition: var(--transition);
    }



    /* Testimonial carousel */
    .testimonial-carousel {
      position: relative;
      overflow: hidden;
    }

    .testimonial-track {
      display: flex;
      gap: 0;
      will-change: transform;
      transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .testimonial-slide {
      flex: 0 0 100%;
      display: flex;
      justify-content: center;
      padding: 10px 0;
    }

    .testimonial-slide .testimonial-card {
      max-width: 720px;
      width: 85%;
      margin: 0 auto;
    }

    .testimonial-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--dark);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
      z-index: 2;
    }

    .testimonial-arrow:hover {
      transform: translateY(-50%) scale(1.06);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    }

    .testimonial-arrow.prev {
      left: 10px;
    }

    .testimonial-arrow.next {
      right: 10px;
    }

    .testimonial-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
    }

    .testimonial-dot {
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      background: rgba(37, 99, 235, 0.25);
      border: none;
      cursor: pointer;
      transition: var(--transition);
    }

    .testimonial-dot.active {
      width: 24px;
      background: var(--primary);
    }

    /* Avatar image support */
    .author-avatar {
      overflow: hidden;
    }

    .author-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    .testimonial-content::before {
      content: "\201C";
      position: absolute;
      top: -6px;
      left: 0;
      font-size: 42px;
      color: rgba(37, 99, 235, 0.15);
      font-family: serif;
      line-height: 1;
    }

    .testimonial-content {
      margin-bottom: 30px;
      font-style: italic;
      color: var(--dark);
      font-size: 18px;
      line-height: 1.8;
      position: relative;
      z-index: 1;
      padding-left: 36px;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .author-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: white;
      font-size: 24px;
      flex-shrink: 0;
    }

    .author-info h4 {
      font-weight: 700;
      font-size: 20px;
    }

    .author-info p {
      font-size: 16px;
      color: var(--gray);
    }

    /* CTA Section */
    .cta {
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      color: white;
      text-align: center;
      padding: 100px 0;
      border-radius: 40px;
      margin: 40px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(37, 99, 235, 0.3);
    }

    .cta::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: rotate 20s linear infinite;
      z-index: 0;
    }

    .cta-content {
      position: relative;
      z-index: 1;
    }

    .cta h2 {
      font-size: 56px;
      margin-bottom: 20px;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .cta p {
      max-width: 700px;
      margin: 0 auto 40px;
      font-size: 22px;
      opacity: 0.9;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 25px;
      flex-wrap: wrap;
    }

    .btn-light {
      background: white;
      color: var(--primary);
      font-weight: 700;
    }

    .btn-light:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
    }

    /* Footer */
    footer {
      background: var(--glass-bg);
      padding: 100px 0 50px;
      border-top: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 50px;
      margin-bottom: 80px;
    }

    .footer-col h3 {
      font-size: 22px;
      margin-bottom: 25px;
      position: relative;
      padding-bottom: 15px;
    }

    .footer-col h3::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50px;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col ul li {
      margin-bottom: 15px;
    }

    .footer-col ul li a {
      color: var(--gray);
      text-decoration: none;
      transition: var(--transition);
      font-size: 18px;
      display: inline-block;
    }

    .footer-col ul li a:hover {
      color: var(--primary);
      transform: translateX(5px);
    }

    .footer-bottom {
      border-top: 1px solid var(--glass-border);
      padding-top: 40px;
      text-align: center;
      color: var(--gray);
      font-size: 16px;
    }

    /* Animations */
    @keyframes float {
      0% {
        transform: translateY(0px);
      }

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

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

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

   

    /* Responsive Design */
    @media (max-width: 1200px) {
      .hero h1 {
        font-size: 54px;
      }

      .section-header h2 {
        font-size: 42px;
      }

      .cta h2 {
        font-size: 46px;
      }
    }

    @media (max-width: 992px) {
      header .navbar {
        gap: 12px;
      }

      header .logo {
        flex: 1 1 auto;
      }

      header .nav-links {
        flex: 0 0 auto;
      }

      header .mobile-menu-btn {
        flex: 0 0 auto;
      }

      .hero-content {
        flex-direction: column;
        text-align: center;
      }

      .hero-text {
        margin-bottom: 60px;
      }

      .hero p {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-buttons,
      .trust-badge {
        justify-content: center;
      }

      /* Responsive nav: show hamburger, hide auth, transform nav into dropdown */
      .mobile-menu-btn {
        display: inline-flex;
        width: 44px;
        height: 44px;
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        background: var(--light);
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 1100;
      }

      .mobile-menu-btn i {
        font-size: 20px;
        color: var(--dark);
      }

      .auth-buttons {
        display: none;
      }

      .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--glass-border);
        padding: 12px 24px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        display: none;
        transform: translateY(-10px);
        opacity: 0;
        transition: var(--transition);
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      }

      .nav-links.open {
        display: flex;
        transform: translateY(0);
        opacity: 1;
      }

      .nav-links a {
        font-size: 18px;
        padding: 10px 6px;
      }

      .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.25);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 900;
      }

      .nav-overlay.active {
        opacity: 1;
        visibility: visible;
      }

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

      .use-cases,
      .testimonials,
      .cta {
        margin: 20px;
      }
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 42px;
      }

      .section-header h2 {
        font-size: 36px;
      }

      .cta h2 {
        font-size: 36px;
      }

      .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--glass-border);
        padding: 12px 24px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        display: none;
        transform: translateY(-10px);
        opacity: 0;
        transition: var(--transition);
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      }

      .nav-links.open {
        display: flex;
        transform: translateY(0);
        opacity: 1;
      }

      .nav-links a {
        font-size: 18px;
        padding: 10px 6px;
      }

      .mobile-menu-btn {
        display: inline-flex;
        width: 44px;
        height: 44px;
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        background: var(--light);
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        z-index: 1100;
      }

      .mobile-menu-btn i {
        font-size: 20px;
        color: var(--dark);
      }

      .auth-buttons {
        display: none;
      }

      .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.25);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 900;
      }

      .nav-overlay.active {
        opacity: 1;
        visibility: visible;
      }
    }

    @media (max-width: 576px) {
      .hero h1 {
        font-size: 36px;
      }

      .hero p {
        font-size: 18px;
      }

      .hero-buttons {
        flex-direction: column;
      }

      .cta-buttons {
        flex-direction: column;
      }

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

      .pricing-card.popular {
        transform: scale(1);
      }

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

      .section-header p {
        font-size: 18px;
      }
    }

    .mobile-menu-btn {
      background: none;
      border: none;
      font-size: 24px;
      color: var(--dark);
      cursor: pointer;
      z-index: 1100;
    }

    /* Scroll to top button */
    .scroll-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
      transition: var(--transition);
      z-index: 99;
      opacity: 0;
      transform: translateY(20px);
    }

    .scroll-top.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-top:hover {
      transform: translateY(-5px) scale(1.1);
    }

    /* Modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
      z-index: 1000;
      padding: 20px;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      width: 100%;
      max-width: 520px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
      transform: translateY(10px) scale(0.98);
      transition: var(--transition);
      overflow: hidden;
    }

    .modal-overlay.active .modal {
      transform: translateY(0) scale(1);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.12));
      border-bottom: 1px solid var(--glass-border);
    }

    .modal-title {
      font-weight: 800;
      font-size: 20px;
      color: var(--dark);
    }

    .modal-close {
      background: transparent;
      border: none;
      font-size: 22px;
      color: var(--dark);
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 10px;
      transition: var(--transition);
    }

    .modal-close:hover {
      background: rgba(0, 0, 0, 0.05);
      transform: scale(1.05);
    }

    .modal-body {
      padding: 22px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--dark);
    }

    .form-control {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--glass-border);
      background: rgba(255, 255, 255, 0.85);
      color: var(--dark);
      outline: none;
      transition: var(--transition);
      font-size: 16px;
    }

    .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
      background: #fff;
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 10px;
    }

    .modal-helper {
      font-size: 14px;
      color: var(--gray);
      margin-top: 8px;
    }

    body.modal-open {
      overflow: hidden;
    }
/*************** section-2 ***************/
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #7c3aed;
  --accent: #f97316;
  --accent-light: #fdba74;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #94a3b8;
  --success: #10b981;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}
                /* Welcome Section - sx-a */
                .sx-a #welcome-section {
                  padding: 5% 0;
                  background: linear-gradient(135deg, #0f172a, #1e293b);
                  position: relative;
                  overflow: hidden;
              }
              
              .sx-a #welcome-section::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: linear-gradient(135deg, #0f172a, #1e293b);
              }
              
              .sx-a .welcome-content {
                  position: relative;
                  z-index: 2;
                  max-width: 1200px;
                  margin: 0 auto;
                  text-align: center;
                  color: var(--light);
              }
              
              .sx-a .welcome-content h2 {
                margin-bottom: 30px;
                line-height: 1.2;
                font-size: 3.5rem;
                background: linear-gradient(to right, #fd4f91, #6796fd);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
              
              .sx-a .welcome-content p {
                  font-size: 1.4rem;
                  margin: 0 auto 50px;
                  opacity: 0.9;
              }
              
              .sx-a .automation-cards {
                justify-content: center;
                margin-top: 60px;
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1.5rem;
              }
              
              .sx-a .automation-card {
                background: linear-gradient(135deg, #0f172a, #1e293b);
                backdrop-filter: blur(10px);
                border-radius: 20px;
                padding: 40px 30px;
                text-align: center;
                border: 1px solid rgba(255, 255, 255, 0.2);
                transition: all 0.4s ease;
                transform: translateY(20px);
                opacity: 1;
                width: auto;
                margin: 0;
              }
              
              .sx-a .automation-card.animate {
                  transform: translateY(0);
                  opacity: 1;
              }
              
              .sx-a .automation-card:hover {
                  transform: translateY(-10px);
                  background: rgba(255, 255, 255, 0.15);
                  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
              }
              
              .sx-a .card-icon {
                  width: 80px;
                  height: 80px;
                  margin: 0 auto 25px;
                  background: var(--gradient);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 30px;
              }
              
              .sx-a .automation-card h3 {
                  font-size: 1.6rem;
                  margin-bottom: 15px;
              }
              
              .sx-a .automation-card p {
                  font-size: 1rem;
                  margin-bottom: 0;
                  opacity: 0.8;
              }
              
              /* Why RuleForge Section - sx-b */
              .sx-b #why-ruleforge {
                  padding: 2% 0;
                  position: relative;
                  overflow: hidden;
              }
              
              .sx-b .why-container {
                  max-width: 1200px;
                  margin: 0 auto;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 50px;
                  align-items: center;
              }
              
              .sx-b .why-content {
                  flex: 1;
                  min-width: 300px;
              }
              
              .sx-b .why-content h2 {
                margin-bottom: 25px;
                font-size: 3.5rem;
                background: linear-gradient(to right, #fd4f91, var(--primary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
              
              .sx-b .why-content p {
                  font-size: 1.2rem;
                  margin-bottom: 40px;
                  color: var(--dark);
                  opacity: 0.9;
              }
              
              .sx-b .why-image {
                  flex: 1;
                  min-width: 300px;
                  position: relative;
              }
              
              .sx-b .interactive-dashboard {
                  width: 100%;
                  height: 100%;
                  background: white;
                  border-radius: 20px;
                  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
                  overflow: hidden;
                  transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
                  transition: transform 0.4s ease;
              }
              
              .sx-b .why-image:hover .interactive-dashboard {
                  transform: perspective(1000px) rotateY(0) rotateX(0);
              }
              
              .sx-b .dashboard-header {
                  background: var(--gradient);
                  height: 60px;
                  display: flex;
                  align-items: center;
                  padding: 0 20px;
                  color: white;
                  font-weight: 500;
              }
              
              .sx-b .dashboard-content {
                  padding: 30px;
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  gap: 20px;
                  height: calc(100% - 60px);
              }
              
              .sx-b .dashboard-widget {
                  background: #f8fafc;
                  border-radius: 12px;
                  padding: 20px;
                  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
                  border: 1px solid #e2e8f0;
                  transition: all 0.3s ease;
                  cursor: pointer;
              }
              
              .sx-b .dashboard-widget:hover {
                  transform: translateY(-5px);
                  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
                  border-color: var(--primary);
              }
              
              .sx-b .widget-title {
                  font-weight: 600;
                  margin-bottom: 15px;
                  color: var(--dark);
                  display: flex;
                  align-items: center;
                  gap: 10px;
              }
              
              .sx-b .widget-title i {
                  color: var(--primary);
              }
              
              .sx-b .widget-content {
                  font-size: 0.9rem;
                  color: #64748b;
              }
              
              .sx-b .widget-large {
                  grid-column: span 2;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
              }
              
              .sx-b .rule-preview {
                  display: flex;
                  gap: 15px;
                  margin-top: 15px;
              }
              
              .sx-b .rule-code {
                  background: #1e293b;
                  color: #cbd5e1;
                  padding: 15px;
                  border-radius: 8px;
                  font-family: monospace;
                  font-size: 0.85rem;
                  flex: 1;
                  overflow: hidden;
              }
              
              .sx-b .rule-highlight {
                  color: var(--accent-light);
                  /* animation: pulse 2s infinite; */
              }
              
              .sx-b .rule-visual {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
              }
              
              .sx-b .rule-step {
                  display: flex;
                  align-items: center;
                  gap: 10px;
              }
              
              .sx-b .step-icon {
                  width: 30px;
                  height: 30px;
                  background: var(--primary);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: white;
                  font-size: 0.8rem;
              }
              
              .sx-b .step-text {
                  flex: 1;
                  font-size: 0.9rem;
              }
              
              .sx-b .step-connector {
                  height: 20px;
                  width: 2px;
                  background: var(--primary);
                  margin-left: 14px;
              }
              
              /* Benefits section - sx-b */
              .sx-b .benefits-container {
                  display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                  gap: 30px;
                  margin-top: 60px;
              }
              
              .sx-b .benefit-card {
                  background: linear-gradient(135deg, #0f172a, #1e293b);
                  border-radius: 20px;
                  padding: 35px;
                  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                  transition: all 0.4s ease;
                  transform: translateY(30px);
                  opacity: 1;
              }

              .sx-b .benefit-card .hdr {
                display: flex;
                align-items: center;
                gap: 13px;
            }
              
              .sx-b .benefit-card.animate {
                  transform: translateY(0);
                  opacity: 1;
              }
              
              .sx-b .benefit-card:hover {
                  transform: translateY(-10px);
                  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
              }
              
              .sx-b .benefit-icon {
                  width: 60px;
                  height: 60px;
                  background: var(--gradient);
                  border-radius: 15px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-bottom: 25px;
                  font-size: 24px;
                  color: white;
              }
              
              .sx-b .benefit-card h3 {
                font-size: 1.4rem;
                margin-bottom: 15px;
                color: var(--light);
                background: linear-gradient(to right, var(--accent-light), #9db7f1);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
              
              .sx-b .benefit-card p {
                  font-size: 1rem;
                  color: #c5c5c5;
                  margin-bottom: 0;
              }
              
              /* Animations */
              @keyframes pulse {
                  0% { opacity: 0.5; }
                  50% { opacity: 1; }
                  100% { opacity: 0.5; }
              }
              
              @keyframes float {
                  0% { transform: translateY(0px); }
                  50% { transform: translateY(-15px); }
                  100% { transform: translateY(0px); }
              }
              
              /* Responsive Design */
              @media (max-width: 992px) {
                  .sx-b .why-container {
                      flex-direction: column;
                  }
                  
                  .sx-b .why-image {
                      width: 100%;
                  }
                  
                  .sx-a .welcome-content h2 {
                      font-size: 2.8rem;
                  }
                  
                  .sx-a .automation-card {
                      width: 280px;
                  }
              }
              
              @media (max-width: 768px) {
                  .sx-a #welcome-section, .sx-b #why-ruleforge {
                      padding: 80px 0;
                  }
                  
                  .sx-a .welcome-content h2 {
                      font-size: 2.3rem;
                  }
                  
                  .sx-a .welcome-content p {
                      font-size: 1.1rem;
                  }
                  
                  .sx-b .why-content h2 {
                      font-size: 2.2rem;
                  }
                  
                  .sx-b .dashboard-content {
                      grid-template-columns: 1fr;
                  }
                  
                  .sx-b .widget-large {
                      grid-column: span 1;
                  }
              }
              
              @media (max-width: 576px) {
                  .sx-a .welcome-content h2 {
                      font-size: 2rem;
                  }
                  
                  .sx-a .automation-card {
                      width: 100%;
                      max-width: 350px;
                  }
              }


/******************* Section 3 *******************/
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #7e22ce;
  --accent: #0ea5e9;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}
.sec-3 {
  font-family: 'Roboto', sans-serif;
  /* background: linear-gradient(135deg, #0f172a, #1e293b); */
  color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
}
.sec-3 header {
  padding: 2rem 0;
  text-align: center;
  background: transparent;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.sec-3 header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  background: linear-gradient(to right, var(--accent-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.sec-3 header p {
  font-size: 1.2rem;
  color: var(--gray);
  max-width: 800px;
  margin: 0 auto;
}

.sec-3 .tagline {
  display: inline-block;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: var(--light);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-top: 1rem;
  font-weight: 500;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.sec-3 .components-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  padding: 3rem 0;
}

.sec-3 .component-card {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.sec-3 .component-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

.sec-3 .card-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
}

.sec-3 .card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.sec-3 .card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--light);
}

.sec-3 .card-content {
  padding: 1.5rem;
  flex-grow: 1;
}

.sec-3 .card-content p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #cbd5e1;
}

.sec-3 .analytics-bar {
  height: 6px;
  background: rgba(100, 116, 139, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin: 1.5rem 0;
  position: relative;
}

.sec-3 .analytics-fill {
  height: 100%;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  transition: width 1.5s ease-in-out;
}

.sec-3 .stats {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.sec-3 .stat-item {
  text-align: center;
  background: rgba(15, 23, 42, 0.5);
  padding: 0.8rem;
  border-radius: 10px;
  flex: 1;
  margin: 0 0.5rem;
  transition: transform 0.3s ease;
}

.sec-3 .stat-item:hover {
  transform: scale(1.05);
  background: rgba(37, 99, 235, 0.15);
}

.sec-3 .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.3rem;
  font-family: 'Poppins', sans-serif;
}

.sec-3 .stat-label {
  font-size: 0.9rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sec-3 .platform-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.sec-3 .platform-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.7);
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.sec-3 .platform-icon:hover {
  transform: translateY(-5px);
  background: var(--primary);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
}

.sec-3 .notification {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid var(--accent);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.sec-3 .notification:hover {
  background: rgba(15, 23, 42, 0.8);
  transform: translateX(5px);
}

.sec-3 .notification-icon {
  font-size: 1.5rem;
  color: var(--accent);
}

.sec-3 .notification-content h4 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.sec-3 .notification-content p {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0;
}

.sec-3 .search-container {
  position: relative;
  margin: 1.5rem 0;
}

.sec-3 .search-input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 3rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(100, 116, 139, 0.3);
  color: var(--light);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.sec-3 .search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}

.sec-3 .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
}

.sec-3 .customer-list {
  overflow-y: auto;
  margin-top: 1rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  text-align: left;
}

.sec-3 .customer-item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
  transition: all 0.2s ease;
}

.sec-3 .customer-item:last-child {
  border-bottom: none;
}

.sec-3 .customer-item:hover {
  background: rgba(37, 99, 235, 0.1);
}

.sec-3 .customer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.sec-3 .customer-info {
  flex-grow: 1;
}

.sec-3 .customer-name {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.sec-3 .customer-id {
  font-size: 0.8rem;
  color: var(--gray);
}

.sec-3 .visualization {
  height: 200px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.sec-3 .bar {
  position: absolute;
  bottom: 0;
  width: 30px;
  background: var(--primary);
  border-radius: 5px 5px 0 0;
  transition: height 1s ease-in-out;
}

.sec-3 .control-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.sec-3 .control-item {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sec-3 .control-item:hover {
  background: rgba(37, 99, 235, 0.2);
  transform: translateY(-5px);
}

.sec-3 .control-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  color: var(--accent);
}

.sec-3 .control-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.sec-3 footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(100, 116, 139, 0.2);
  color: var(--gray);
  font-size: 0.9rem;
}

.sec-3 .highlight {
  color: var(--accent);
}

/* Animation keyframes */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.sec-3 .pulse {
  animation: pulse 2s infinite;
}

/* Responsive design */
@media (max-width: 900px) {
  .sec-3 .components-grid {
      grid-template-columns: 1fr;
  }
  
  .sec-3 header h1 {
      font-size: 2.5rem;
  }
}

/******************* Section 4 ******************/
:root {
  --primary: #4361ee;
  --primary-dark: #3a56d4;
  --secondary: #7209b7;
  --accent: #f72585;
  --accent-light: #ff70a6;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #94a3b8;
  --success: #06d6a0;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --card-gradient: linear-gradient(145deg, #2a2f4c, #1d2238);
}
.sec-4 {
  font-family: 'Roboto', sans-serif;
            color: white;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
            padding: 20px;
}
.sec-4 .container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.sec-4 .header {
  text-align: center;
  margin-bottom: 60px;
  padding-top: 40px;
}

.sec-4 .header h1 {
  font-size: 3.5rem;
  background: linear-gradient(to right, var(--accent-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

.sec-4 .header p {
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto;
  color: var(--gray);
}

/* Magic Section */


.sec-4 .section-title {
  text-align: center;
  margin-bottom: 60px;
}

.sec-4 .section-title h2 {
  font-size: 2.8rem;
  margin-bottom: 15px;
  background: linear-gradient(to right, var(--success), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-4 .section-title p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  color: var(--gray);
}

.sec-4 .magic-cards {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 50px;
}

.sec-4 .magic-card {
  max-width: calc(50% - 82px);
  width: 100%;
  background: var(--card-gradient);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-10deg) translateZ(0);
  box-shadow: 
      -20px 20px 40px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sec-4 .magic-card:hover {
  transform: rotateX(0) rotateY(0) translateY(-20px) translateZ(30px);
  box-shadow: 
      -30px 30px 60px rgba(0, 0, 0, 0.6),
      0 0 30px rgba(113, 9, 183, 0.4),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sec-4 .magic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient);
}

.sec-4 .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.sec-4 .card-icon {
  width: 70px;
  height: 70px;
  background: var(--gradient);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 30px;
}

.sec-4 .card-title {
  font-size: 1.8rem;
}

.sec-4 .card-content {
  margin-bottom: 30px;
}

.sec-4 .card-content p {
  margin-bottom: 20px;
  color: #cbd5e1;
}

.sec-4 .features-list {
  list-style: none;
}

.sec-4 .features-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-4 .features-list li:last-child {
  border-bottom: none;
}

.sec-4 .features-list li::before {
  content: "✓";
  color: var(--success);
  font-weight: bold;
  margin-right: 15px;
  font-size: 1.2rem;
}

.sec-4 .highlight {
  background: rgba(6, 214, 160, 0.1);
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--success);
  font-weight: 500;
}

/* Change Section */
.sec-4 #change-section {
  padding: 80px 0;
}

.sec-4 .change-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.sec-4 .change-card {
  background: var(--card-gradient);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-8deg) translateZ(0);
  box-shadow: 
      -15px 15px 30px rgba(0, 0, 0, 0.4),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sec-4 .change-card:hover {
  transform: rotateX(0) rotateY(0) translateY(-15px) translateZ(20px);
  box-shadow: 
      -20px 20px 40px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(113, 9, 183, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sec-4 .change-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient);
}

.sec-4 .change-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.sec-4 .change-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
}

.sec-4 .change-title {
  font-size: 1.6rem;
}

.sec-4 .capabilities {
  list-style: none;
}

.sec-4 .capabilities li {
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
}

.sec-4 .capabilities li::before {
  content: "•";
  color: var(--accent);
  font-weight: bold;
  margin-right: 15px;
  font-size: 1.5rem;
}

/* Business Areas Section */
.sec-4 #business-section {
  padding: 80px 0;
}

.sec-4 .business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.sec-4 .business-card {
  background: var(--card-gradient);
  border-radius: 20px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-6deg) translateZ(0);
  box-shadow: 
      -10px 10px 20px rgba(0, 0, 0, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
}

.sec-4 .business-card:hover {
  transform: rotateX(0) rotateY(0) translateY(-10px) translateZ(15px);
  box-shadow: 
      -15px 15px 30px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(113, 9, 183, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sec-4 .business-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient);
}

.sec-4 .business-icon {
  width: 70px;
  height: 70px;
  background: var(--gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
}

.sec-4 .business-title {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.sec-4 .business-card p {
  color: #cbd5e1;
}

/* Performance Section */
.sec-4 #performance-section {
  padding: 80px 0 120px;
}

.sec-4 .performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.sec-4 .performance-card {
  background: var(--card-gradient);
  border-radius: 20px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-6deg) translateZ(0);
  box-shadow: 
      -10px 10px 20px rgba(0, 0, 0, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
}

.sec-4 .performance-card:hover {
  transform: rotateX(0) rotateY(0) translateY(-10px) translateZ(15px);
  box-shadow: 
      -15px 15px 30px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(113, 9, 183, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sec-4 .performance-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient);
}

.sec-4 .performance-icon {
  width: 70px;
  height: 70px;
  background: var(--gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
}

.sec-4 .performance-title {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.sec-4 .performance-card p {
  color: #cbd5e1;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .sec-4 .magic-cards {
      flex-direction: column;
      align-items: center;
  }
  
  .sec-4 .magic-card {
      width: 100%;
      max-width: 700px;
  }
}

@media (max-width: 768px) {
  .sec-4 .header h1 {
      font-size: 2.8rem;
  }
  
  .sec-4 .section-title h2 {
      font-size: 2.3rem;
  }
  
  .sec-4 .magic-card, .sec-4 .change-card {
      padding: 30px;
  }
  
  .sec-4 .card-header, .sec-4 .change-header {
      flex-direction: column;
      align-items: flex-start;
  }
  
  .sec-4 .card-icon, .sec-4 .change-icon {
      margin-right: 0;
      margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .sec-4 .header h1 {
      font-size: 2.3rem;
  }
  
  .sec-4 .section-title h2 {
      font-size: 2rem;
  }
  
  .sec-4 .change-grid {
      grid-template-columns: 1fr;
  }
}


/************************** Section 5 **************/
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #7e22ce;
  --accent: #0ea5e9;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}
.sec-5 {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
}
.sec-5 .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.sec-5 header {
  padding: 2rem 0;
  text-align: center;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: none;
}

.sec-5 header h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: transparent;
  margin-bottom: 0.5rem;
  font-size: 3.5rem;
  background: linear-gradient(to right, var(--accent-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-5 header p {
  font-size: 1.2rem;
  color: #bfbfbf;
  max-width: 800px;
  margin: 0 auto;
}

.sec-5 .tagline {
  display: inline-block;
  background: rgba(37, 99, 235, 0.15);
  color: var(--light);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-top: 1rem;
  font-weight: 500;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.sec-5 .integration-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2.5rem;
  padding: 3rem 0;
}

.sec-5 .integration-card {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sec-5 .integration-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

.sec-5 .card-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
}

.sec-5 .card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.sec-5 .card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--light);
}

.sec-5 .card-content {
  padding: 1.5rem;
  flex-grow: 1;
}

.sec-5 .card-content p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #cbd5e1;
}

.sec-5 .feature-list {
  list-style: none;
  margin: 1.5rem 0;
}

.sec-5 .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.sec-5 .feature-item:last-child {
  border-bottom: none;
}

.sec-5 .feature-icon {
  color: var(--accent);
  font-size: 1.2rem;
  min-width: 25px;
  padding-top: 3px;
}

.sec-5 .feature-text {
  flex: 1;
}

.sec-5 .integration-visual {
  height: 248px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-5 .system-node {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: rgba(30, 41, 59, 0.9);
  border: 2px solid var(--primary);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 2;
}

.sec-5 .system-node:hover {
  transform: scale(1.1);
  z-index: 3;
}

.sec-5 .connection-line {
  position: absolute;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  z-index: 1;
}

.sec-5 .stats {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.sec-5 .stat-item {
  text-align: center;
  background: rgba(15, 23, 42, 0.5);
  padding: 0.8rem;
  border-radius: 10px;
  flex: 1;
  margin: 0 0.5rem;
  transition: transform 0.3s ease;
}

.sec-5 .stat-item:hover {
  transform: scale(1.05);
  background: rgba(37, 99, 235, 0.15);
}

.sec-5 .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.3rem;
  font-family: 'Poppins', sans-serif;
}

.sec-5 .stat-label {
  font-size: 0.9rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sec-5 .analytics-bar {
  height: 6px;
  background: rgba(100, 116, 139, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin: 1.5rem 0;
  position: relative;
}

.sec-5 .analytics-fill {
  height: 100%;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  transition: width 1.5s ease-in-out;
}

.sec-5 .customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.sec-5 .customer-card {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.sec-5 .customer-card:hover {
  transform: translateY(-5px);
  background: rgba(37, 99, 235, 0.2);
}

.sec-5 .customer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.8rem;
  font-weight: 600;
  font-size: 1.2rem;
}

.sec-5 .customer-name {
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.sec-5 .customer-status {
  font-size: 0.8rem;
  color: var(--success);
}

.sec-5 .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.sec-5 .service-card {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  padding: 1rem 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.sec-5 .service-card:hover {
  transform: translateY(-5px);
  background: rgba(37, 99, 235, 0.2);
}

.sec-5 .service-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.sec-5 .service-name {
  font-size: 0.8rem;
}

.sec-5 .toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 0 10px;
}

.sec-5 .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sec-5 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.sec-5 .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.sec-5 input:checked + .slider {
  background-color: var(--success);
}

.sec-5 input:checked + .slider:before {
  transform: translateX(30px);
}

.sec-5 .timeline {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
  padding-top: 15px;
}

.sec-5 .timeline-bar {
  height: 30px;
  margin-bottom: 15px;
  background: var(--primary);
  border-radius: 5px;
  transition: width 1s ease-in-out;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
}

.sec-5 .dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.sec-5 .dashboard-item {

  background-color: rgb(25, 33, 52);
  border-radius: 8px;
  padding: 1rem;
}

.sec-5 .dashboard-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.3rem;
  font-family: 'Poppins', sans-serif;
}

.sec-5 .dashboard-label {
  font-size: 0.9rem;
  color: var(--gray);
}

.sec-5 .dashboard-trend {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.sec-5 .trend-up {
  color: var(--success);
}

.sec-5 .trend-down {
  color: var(--danger);
}

.sec-5 footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(100, 116, 139, 0.2);
  background-color: transparent;
  color: var(--gray);
  font-size: 0.9rem;
}

.sec-5 .highlight {
  color: var(--accent);
}

/* Animation keyframes */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.sec-5 .pulse {
  animation: pulse 2s infinite;
}

@keyframes connect {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.sec-5 .connecting {
  animation: connect 1.5s infinite;
}

/* Responsive design */
@media (max-width: 900px) {
  .sec-5 .integration-showcase {
      grid-template-columns: 1fr;
  }
  
  .sec-5 header h1 {
      font-size: 2.5rem;
  }
  
  .sec-5 .dashboard {
      grid-template-columns: 1fr;
  }
}

/******************** Section 6 *****************/

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #7e22ce;
  --accent: #0ea5e9;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --pricing: #f59e0b;
  --bundles: #8b5cf6;
  --marketing: #ec4899;
  --loyalty: #10b981;
  --context: #0ea5e9;
}

.sec-6 {
  
  font-family: 'Roboto', sans-serif;
  /* background: linear-gradient(135deg, #0f172a, #1e293b); */
  color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;

}

.sec-6 .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 3rem;
}

.sec-6 header {
  padding: 2rem 0;
  text-align: center;
  background: transparent;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: none;
}

.sec-6 header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
    background: linear-gradient(to right, var(--accent-light), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.sec-6 header p {
  font-size: 1.2rem;
  color: var(--gray);
  max-width: 800px;
  margin: 0 auto;
}

.sec-6 .tagline {
  display: inline-block;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: var(--light);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-top: 1rem;
  font-weight: 500;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.sec-6 .section-title {
  text-align: center;
  margin: 3rem 0 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  background: linear-gradient(to right, var(--accent), var(--success));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(14, 165, 233, 0.2);
}

.sec-6 .section-subtitle {
  text-align: center;
  color: var(--gray);
  max-width: 800px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
}

.sec-6 .examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2.5rem;
  padding: 0 0 3rem;
}

.sec-6 .example-card {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sec-6 .example-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

.sec-6 .example-icon {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
  z-index: 2;
}

.sec-6 .card-header {
  padding: 2rem 2rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
}

.sec-6 .card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--light);
}

.sec-6 .card-content {
  padding: 1.5rem 2rem 2rem;
  flex-grow: 1;
}

.sec-6 .problem-section {
  background: rgba(15, 23, 42, 0.4);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--danger);
}

.sec-6 .solution-section {
  background: rgba(15, 23, 42, 0.4);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--success);
}

.sec-6 .impact-section {
  background: rgba(15, 23, 42, 0.4);
  padding: 1rem;
  border-radius: 10px;
  border-left: 4px solid var(--accent);
}

.sec-6 .section-title-small {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sec-6 .section-content {
  font-size: 1.1rem;
  color: #cbd5e1;
  padding-left: 1.8rem;
}

.sec-6 .stats {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  gap: 1rem;
}

.sec-6 .stat-item {
  text-align: center;
  background: rgb(255 255 255);
  padding: 1rem;
  border-radius: 10px;
  flex: 1;
  transition: all 0.3s ease;
  color: var(--dark);
}

.sec-6 .stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

.sec-6 .stat-value {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to right, var(--accent-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-6 .stat-label {
  font-size: 0.9rem;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sec-6 .pricing-card {
  border-top: 4px solid var(--pricing);
}

.sec-6 .pricing-icon {
  background: linear-gradient(135deg, var(--pricing), #b45309);
}

.sec-6 .bundles-card {
  border-top: 4px solid var(--bundles);
}

.sec-6 .bundles-icon {
  background: linear-gradient(135deg, var(--bundles), #6d28d9);
}

.sec-6 .marketing-card {
  border-top: 4px solid var(--marketing);
}

.sec-6 .marketing-icon {
  background: linear-gradient(135deg, var(--marketing), #be185d);
}

.sec-6 .loyalty-card {
  border-top: 4px solid var(--loyalty);
}

.sec-6 .loyalty-icon {
  background: linear-gradient(135deg, var(--loyalty), #047857);
}

.sec-6 .context-card {
  border-top: 4px solid var(--context);
}

.sec-6 .context-icon {
  background: linear-gradient(135deg, var(--context), #0369a1);
}

.sec-6 footer {
  background-color: transparent;
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(100, 116, 139, 0.2);
  color: var(--gray);
  font-size: 0.9rem;
}

.sec-6 .highlight {
  color: var(--accent);
}

/* Animation keyframes */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.sec-6 .pulse {
  animation: pulse 2s infinite;
}

/* Responsive design */
@media (max-width: 1100px) {
  .sec-6 .examples-grid {
      grid-template-columns: 1fr;
  }
  
  .sec-6 header h1 {
      font-size: 2.5rem;
  }
  
  .sec-6 .section-title {
      font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .sec-6 .stats {
      flex-direction: column;
  }
  
  .sec-6 .example-icon {
      width: 60px;
      height: 60px;
      font-size: 2rem;
      top: -15px;
      right: -15px;
  }
}

/******************* Section 7 *************/
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #7e22ce;
  --accent: #0ea5e9;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --business: #8b5cf6;
  --technical: #0ea5e9;
  --support: #10b981;
}

.sec-7 {
  
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
}

.sec-7 .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.sec-7 header {
  padding: 2rem 0;
  text-align: center;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: none;
  margin-bottom: 4rem;
}

.sec-7 header h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: transparent;
  margin-bottom: 0.5rem;
  font-size: 3.5rem;
    background: linear-gradient(to right, var(--accent-light), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sec-7 .tagline {
  display: inline-block;
  background: rgba(37, 99, 235, 0.15);
  color: var(--light);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-top: 1rem;
  font-weight: 500;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.sec-7 .section-title {
  text-align: center;
  margin: 3rem 0 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  background: linear-gradient(to right, var(--accent), var(--success));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(14, 165, 233, 0.2);
}

.sec-7 .section-subtitle {
  text-align: center;
  color: #d3d3d3;
  margin: 0 auto;
  font-size: 1.2rem;
  margin-top: -10px;
  margin-bottom: 15px;
}

.sec-7 .columns-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2.5rem;
  padding: 0 0 3rem;
}

.sec-7 .column-card {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sec-7 .column-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

.sec-7 .card-header {
  padding: 2rem 2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
}

.sec-7 .card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.sec-7 .card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--light);
}

.sec-7 .card-content {
  padding: 1.5rem 2rem 2rem;
  flex-grow: 1;
}

.sec-7 .process-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sec-7 .step-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.2rem;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 12px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.sec-7 .step-item:hover {
  transform: translateX(10px);
  background: rgba(15, 23, 42, 0.6);
  border-left: 4px solid var(--accent);
}

.sec-7 .step-icon {
  min-width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.sec-7 .step-content {
  flex-grow: 1;
}

.sec-7 .step-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--light);
}

.sec-7 .step-description {
  font-size: 1rem;
  color: #cbd5e1;
}

.sec-7 .support-section {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 15px;
  padding: 2.5rem;
  margin: 3rem 0;
  text-align: center;
  border: 1px solid rgba(100, 116, 139, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sec-7 .support-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--light);
}

.sec-7 .support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.sec-7 .support-card {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 12px;
  padding: 1.8rem;
  transition: all 0.3s ease;
}

.sec-7 .support-card:hover {
  transform: translateY(-5px);
  background: rgba(15, 23, 42, 0.7);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
}

.sec-7 .support-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--support);
}

.sec-7 .support-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--light);
}

.sec-7 .support-card-description {
  font-size: 1rem;
  color: #cbd5e1;
}

.sec-7 .business-icon {
  background: linear-gradient(135deg, var(--business), #6d28d9);
}

.sec-7 .technical-icon {
  background: linear-gradient(135deg, var(--technical), #0369a1);
}

.sec-7 .business-card {
  border-top: 4px solid var(--business);
}

.sec-7 .technical-card {
  border-top: 4px solid var(--technical);
}

.sec-7 .business-step .step-icon {
  background: rgba(139, 92, 246, 0.15);
  color: var(--business);
}

.sec-7 .technical-step .step-icon {
  background: rgba(14, 165, 233, 0.15);
  color: var(--technical);
}

.sec-7 .cta-container {
  text-align: center;
  margin: 3rem 0;
}

.sec-7 .cta-button {
  display: inline-block;
  background: linear-gradient(to right, var(--accent), var(--primary));
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(14, 165, 233, 0.4);
}

.sec-7 .cta-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.6);
}

.sec-7 footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(100, 116, 139, 0.2);
  background-color: transparent;
  color: var(--gray);
  font-size: 0.9rem;
}

.sec-7 .highlight {
  color: var(--accent);
}

/* Animation keyframes */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.sec-7 .pulse {
  animation: pulse 2s infinite;
}

/* Responsive design */
@media (max-width: 1100px) {
  .sec-7 .columns-container {
      grid-template-columns: 1fr;
  }
  
  .sec-7 header h1 {
      font-size: 2.5rem;
  }
  
  .sec-7 .section-title {
      font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .sec-7 .card-header {
      flex-direction: column;
      text-align: center;
  }
  
  .sec-7 .step-item {
      flex-direction: column;
      text-align: center;
      align-items: center;
  }
}

/**************** Section 8 ***************/
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #7e22ce;
  --accent: #0ea5e9;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}
.sec-8{
  
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sec-8 .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.sec-8 header {
  padding: 2rem 0;
  text-align: center;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sec-8 header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(to right, var(--accent), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(14, 165, 233, 0.2);
}

.sec-8 .tagline {
  display: inline-block;
  background: rgba(37, 99, 235, 0.15);
  color: var(--accent);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-top: 1rem;
  font-weight: 500;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.sec-8 .transformation-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.sec-8 .transform-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 30%),
              radial-gradient(circle at bottom left, rgba(126, 34, 206, 0.1), transparent 30%);
  z-index: -1;
}

.sec-8 .transform-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.sec-8 .transform-text {
  padding: 2rem;
}

.sec-8 .transform-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, var(--light), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-8 .transform-description {
  font-size: 1.2rem;
  color: #cbd5e1;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.sec-8 .journey-container {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(100, 116, 139, 0.3);
  transition: all 0.4s ease;
}

.sec-8 .journey-container:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

.sec-8 .journey-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--light);
}

.sec-8 .journey-title i {
  color: var(--accent);
}

.sec-8 .journey-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.sec-8 .journey-step {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border-left: 4px solid var(--accent);
  cursor: pointer;
}

.sec-8 .journey-step:hover {
  transform: translateY(-5px);
  background: rgba(37, 99, 235, 0.15);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.2);
}

.sec-8 .step-icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.sec-8 .step-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--light);
}

.sec-8 .step-description {
  font-size: 0.95rem;
  color: #cbd5e1;
}

.sec-8 .success-stories {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 2rem;
  border-top: 2px solid var(--secondary);
}

.sec-8 .stories-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sec-8 .stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.sec-8 .story-logo {
  height: 60px;
  background: rgba(30, 41, 59, 0.7);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent);
  transition: all 0.3s ease;
}

.sec-8 .story-logo:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(14, 165, 233, 0.2);
}

.sec-8 .contact-container {
  background: rgba(30, 41, 59, 0.7);
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(100, 116, 139, 0.3);
  transition: all 0.4s ease;
}

.sec-8 .contact-container:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.2);
  border-color: rgba(14, 165, 233, 0.5);
}

.sec-8 .contact-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--light);
}

.sec-8 .contact-title i {
  color: var(--accent);
}

.sec-8 .contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.sec-8 .contact-method {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border-left: 4px solid var(--secondary);
  cursor: pointer;
}

.sec-8 .contact-method:hover {
  transform: translateY(-5px);
  background: rgba(126, 34, 206, 0.15);
  box-shadow: 0 5px 15px rgba(126, 34, 206, 0.2);
}

.sec-8 .method-icon {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.sec-8 .method-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--light);
}

.sec-8 .method-details {
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.sec-8 .method-action {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  background: rgba(37, 99, 235, 0.2);
  color: var(--accent);
  border-radius: 50px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.sec-8 .method-action:hover {
  background: var(--primary);
  color: white;
  transform: translateX(5px);
}

.sec-8 .calendar-container {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 2rem;
  border-top: 2px solid var(--success);
}

.sec-8 .calendar-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sec-8 .calendar-button {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

.sec-8 .calendar-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.sec-8 .visualization {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-8 .data-flow {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.3);
  border: 2px dashed rgba(14, 165, 233, 0.3);
  animation: rotate 30s linear infinite;
}

.sec-8 .data-node {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.sec-8 .node-1 {
  top: 20%;
  left: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.sec-8 .node-2 {
  top: 50%;
  left: 20%;
  background: linear-gradient(135deg, var(--secondary), #6d28d9);
}

.sec-8 .node-3 {
  top: 50%;
  left: 80%;
  background: linear-gradient(135deg, var(--accent), #0284c7);
}

.sec-8 .node-4 {
  top: 80%;
  left: 50%;
  background: linear-gradient(135deg, var(--success), #059669);
}

.sec-8 .pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(14, 165, 233, 0.5);
  animation: pulse 3s infinite;
}

.sec-8 .pulse-ring:nth-child(2) {
  animation-delay: 1s;
}

.sec-8 .pulse-ring:nth-child(3) {
  animation-delay: 2s;
}

@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  100% {
      transform: scale(1.5);
      opacity: 0;
  }
}

@keyframes rotate {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.sec-8 .floating-text {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  animation: float 8s infinite linear;
}

.sec-8 .text-1 {
  top: 10%;
  left: 50%;
  animation-delay: 0s;
}

.sec-8 .text-2 {
  top: 50%;
  left: 10%;
  animation-delay: -2s;
}

.sec-8 .text-3 {
  top: 50%;
  left: 90%;
  animation-delay: -4s;
}

.sec-8 .text-4 {
  top: 90%;
  left: 50%;
  animation-delay: -6s;
}

@keyframes float {
  0% {
      transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

.sec-8 footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: auto;
  border-top: 1px solid rgba(100, 116, 139, 0.2);
  background-color: transparent;
  color: var(--gray);
  font-size: 0.9rem;
}

.sec-8 .highlight {
  color: var(--accent);
}

/* Responsive design */
@media (max-width: 1000px) {
  .sec-8 .transform-content {
      grid-template-columns: 1fr;
  }
  
  .sec-8 .visualization {
      height: 400px;
      margin-top: 2rem;
  }
  
  .sec-8 .transform-heading {
      font-size: 2.5rem;
  }
}

@media (max-width: 600px) {
  .sec-8 header h1 {
      font-size: 2.5rem;
  }
  
  .sec-8 .transform-heading {
      font-size: 2rem;
  }
}