@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
  :root {
  --main-bg: linear-gradient(135deg, #83da5a 0%, #6d5bff 100%);
  --header-bg: linear-gradient(135deg, #c6e86b 0%, #6d5bff 100%);
  --primary: #2256f4;
  --primary-dark: #1849d7;
  --accent: #a18aff;
  --feature-glow: #a18aff66;
  --feature-glow-strong: #a18affcc;
}
  body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background: var(--main-bg);
  }
  header {
    display: flex;
    align-items: center;
    padding: 1rem 3rem;
    gap: 1rem;
    background: var(--header-bg);
  }
  header img {
    width: 40px;
    height: 40px;
  }
  header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
  }
  header p {
    margin: 0;
    font-size: 0.875rem;
    color: #020d17;
  }
   .lang-switch {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
  }
  .lang-btn {
    cursor: pointer;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 6px;
    background-color: #fff;
    color: #14172b;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .lang-btn.active {
  background-color: #2256f4;
  color: #f1f4ef;
}
  .intro {
    text-align: center;
    max-width: 720px;
    margin: 3rem auto 2rem auto;
    padding: 0 1rem;
  }
  .intro h2 {
    font-size: 2.25rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
  }
  .intro p {
    font-size: 1rem;
    font-weight: 400;
    color: #566370;
    margin-bottom: 2.5rem;
  }
  .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s ease;
  }
  .btn-primary:hover {
    background: var(--primary-dark);
  }
  .btn-primary svg {
    stroke: #fff;
    width: 16px;
    height: 16px;
  }

  .feature-list {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 920px;
    margin: 3rem auto;
    flex-wrap: wrap;
    padding: 0 1rem;
  }
  .feature {
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 8px rgb(0 0 0 / 0.1);
    width: 210px;
    padding: 1.5rem 1rem 1rem 1rem;
    text-align: center;
  }
  .feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .feature-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
  }
  .feature strong {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 700;
    font-size: 1rem;
  }
  .feature p {
    font-size: 0.875rem;
    color: #566370;
    margin: 0;
    line-height: 1.3rem;
  }

  /* Individual feature icon backgrounds */
  .icon-blue { background: #d9e5ff; color: #2256f4; }
  .icon-green { background: #d9f2d9; color: #228c22; }
  .icon-purple { background: #efd9ff; color: #8b3edc; }
  .icon-orange { background: #ffe7cc; color: #f47f22; }

  .how-it-works {
    max-width: 920px;
    margin: 3rem auto 2rem auto;
    background: white;
    padding: 1.5rem 2rem 2rem 2rem;
    border-radius: 12px;
    box-shadow: 0 0 18px rgb(0 0 0 / 0.08);
    text-align: center;
  }
  .how-it-works h3 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }
  .how-it-works p {
    color: #566370;
    font-weight: 400;
    margin-bottom: 2rem;
  }
  .steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .step {
    flex: 0 0 180px;
  }
  .step-circle {
    width: 44px;
    height: 44px;
    margin: 0 auto 1rem auto;
    background: #2256f4;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .step.done {
    background: white;
  }
  .step strong {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 700;
  }
  .step p {
    font-size: 0.875rem;
    color: #566370;
    margin: 0;
    line-height: 1.3rem;
  }

  .stats {
    display: flex;
    max-width: 920px;
    margin: 2.5rem auto;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 1rem;
  }
  .stat-block {
    flex: 1 1 200px;
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
  }
  .stat-blue { background: #2256f4; }
  .stat-green { background: #249040; }
  .stat-purple { background: #8b3edc; }
  .stat-block span {
    display: block;
    font-weight: 400;
    font-size: 0.9rem;
    margin-top: 0.375rem;
    color: #d1d5db;
    
  }

  .ready-section {
    background: #2256f4;
    color: white;
    padding: 3rem 1rem;
    text-align: center;
    max-width: 920px;
    margin: 3rem auto 5rem auto;
    border-radius: 12px;
  }
  .ready-section h2 {
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.375rem;
  }
  .ready-section p {
    font-weight: 400;
    margin-bottom: 2rem;
  }
  .btn-secondary {
    background: white;
    border: none;
    font-weight: 700;
    font-size: 1.125rem;
    padding: 0.75rem 2.25rem;
    border-radius: 6px;
    cursor: pointer;
    color: #14172b;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  .btn-secondary:hover {
    background: #2256f4;
    color: white;
    box-shadow: 0 4px 16px rgb(34 86 244 / 0.25);
  }
  .btn-secondary svg {
    stroke: #14172b;
    width: 18px;
    height: 18px;
  }

  /* Card hover effect */
  .feature:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 8px 24px rgb(34 86 244 / 0.12);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
  }

  /* Stats card hover effect */
  .stat-block:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 8px 24px rgb(34 86 244 / 0.12);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
  }
  /* Login button hover effect */
.btn-login:hover {
  background: #1849d7;
  color: #fff;
  box-shadow: 0 4px 16px rgb(34 86 244 / 0.15);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
  footer {
    text-align: center;
    padding: 1rem;
    background: #6280bd;
    color: #e1e4e9;
    font-size: 1.475rem;
  }

  /* Glow effect for cards */
.feature:hover,
.stat-block:hover {
  box-shadow:
    0 0 16px 4px var(--feature-glow),
    0 8px 24px var(--primary)1F;
}

/* Glow effect for primary and secondary buttons */
.btn-primary:hover,
.btn-secondary:hover,
.btn-login:hover {
  box-shadow: 0 0 16px 4px #a18aff99, 0 4px 16px rgb(34 86 244 / 0.15);
}


@keyframes glow {
  0% {
    box-shadow: 0 0 8px 2px var(--feature-glow), 0 8px 24px var(--primary)1F;
  }
  50% {
    box-shadow: 0 0 24px 8px var(--feature-glow-strong), 0 8px 24px var(--primary)2E;
  }
  100% {
    box-shadow: 0 0 8px 2px var(--feature-glow), 0 8px 24px var(--primary)1F;
  }
}
.feature:hover {
  animation: glow 1.2s infinite alternate;
}

/* Mobile responsiveness */
  @media (max-width: 768px) {
    header {
      flex-direction: column;
      text-align: center;
      padding: 1rem;
      gap: 0.5rem;
    }
    header h1 {
      font-size: 1rem;
    }
    header p {
      font-size: 0.75rem;
    }
    .lang-switch {
      margin-left: 0;
      justify-content: center;
    }
    .intro {
      margin: 2rem auto 1rem auto;
      padding: 0 0.5rem;
    }
    .intro h2 {
      font-size: 1.5rem;
    }
    .intro p {
      font-size: 0.875rem;
      margin-bottom: 1.5rem;
    }
    .feature-list {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      margin: 2rem auto;
    }
    .feature {
      width: 100%;
      max-width: 300px;
    }
    .how-it-works {
      margin: 2rem auto 1rem auto;
      padding: 1rem;
    }
    .how-it-works h3 {
      font-size: 1.25rem;
    }
    .steps {
      flex-direction: column;
      gap: 1rem;
    }
    .step {
      flex: none;
      width: 100%;
    }
    .stats {
      flex-direction: column;
      margin: 2rem auto;
    }
    .stat-block {
      width: 100%;
    }
    .ready-section {
      margin: 2rem auto 3rem auto;
      padding: 2rem 1rem;
    }
    .ready-section h2 {
      font-size: 1.25rem;
    }
    .btn-secondary {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
    }
    footer {
      font-size: 1rem;
    }
  }