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

        body {
          font-family: Arial, sans-serif;
          background: #0f172a;
          color: white;
          overflow-x: hidden;
        }

        a {
          text-decoration: none;
        }

        /* NAVBAR */

        .navbar {
          width: 100%;
          padding: 22px 8%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: fixed;
          top: 0;
          z-index: 1000;
          backdrop-filter: blur(14px);
          background: rgba(15, 23, 42, 0.7);
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .logo {
          font-size: 30px;
          font-weight: 700;
          letter-spacing: 1px;
        }

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

        .nav-btn {
          padding: 12px 24px;
          border-radius: 12px;
          font-size: 15px;
          font-weight: 600;
          transition: 0.3s ease;
        }

        .download-btn {
          background: white;
          color: #0f172a;
        }

        .download-btn:hover {
          transform: translateY(-2px);
          opacity: 0.92;
        }

        .login-btn {
          background: rgba(255, 255, 255, 0.08);
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .login-btn:hover {
          background: rgba(255, 255, 255, 0.14);
          transform: translateY(-2px);
        }

        /* HERO SECTION */

        .hero {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 140px 8% 80px;
          gap: 60px;
          background:
            radial-gradient(circle at top left,
              rgba(59, 130, 246, 0.18),
              transparent 35%),
            radial-gradient(circle at bottom right,
              rgba(255, 255, 255, 0.06),
              transparent 30%),
            #0f172a;
        }

        .hero-content {
          flex: 1;
          max-width: 650px;
        }

        .hero-tag {
          display: inline-block;
          padding: 10px 18px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.08);
          margin-bottom: 28px;
          color: #cbd5e1;
          font-size: 14px;
        }

        .hero h1 {
          font-size: 68px;
          line-height: 1.1;
          margin-bottom: 28px;
          font-weight: 800;
        }

        .hero p {
          font-size: 20px;
          line-height: 1.8;
          color: #cbd5e1;
          margin-bottom: 40px;
          max-width: 620px;
        }

        .hero-buttons {
          display: flex;
          gap: 20px;
          flex-wrap: wrap;
        }

        .hero-btn {
          padding: 18px 34px;
          border-radius: 16px;
          font-size: 17px;
          font-weight: 600;
          transition: 0.3s ease;
        }

        .hero-download {
          background: white;
          color: #0f172a;
        }

        .hero-download:hover {
          transform: translateY(-3px);
        }

        .hero-login {
          border: 1px solid rgba(255, 255, 255, 0.15);
          background: rgba(255, 255, 255, 0.06);
          color: white;
        }

        .hero-login:hover {
          background: rgba(255, 255, 255, 0.12);
          transform: translateY(-3px);
        }

        /* DASHBOARD MOCKUP */

        .dashboard {
          flex: 1;
          display: flex;
          justify-content: center;
        }

        .dashboard-card {
          width: 100%;
          max-width: 520px;
          border-radius: 28px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.08);
          backdrop-filter: blur(14px);
          padding: 28px;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
        }

        .dashboard-top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 24px;
        }

        .mini-card {
          width: 31%;
          padding: 20px;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.05);
        }

        .mini-card h3 {
          font-size: 28px;
          margin-bottom: 8px;
        }

        .mini-card p {
          color: #94a3b8;
          font-size: 13px;
        }

        .large-chart {
          height: 220px;
          border-radius: 22px;
          background:
            linear-gradient(to top,
              rgba(255, 255, 255, 0.05),
              rgba(255, 255, 255, 0.02));
          position: relative;
          overflow: hidden;
        }

        .chart-line {
          position: absolute;
          width: 140%;
          height: 180px;
          border-radius: 50%;
          border: 3px solid rgba(255, 255, 255, 0.25);
          bottom: -90px;
          left: -20%;
        }

        .chart-line.two {
          bottom: -70px;
          opacity: 0.6;
        }

        /* SECTION */

        section {
          padding: 110px 8%;
        }

        .section-header {
          text-align: center;
          max-width: 780px;
          margin: auto;
          margin-bottom: 70px;
        }

        .section-header h2 {
          font-size: 52px;
          margin-bottom: 22px;
        }

        .section-header p {
          color: #cbd5e1;
          line-height: 1.8;
          font-size: 18px;
        }

        /* FEATURES */

        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 28px;
        }

        .feature-card {
          padding: 34px;
          border-radius: 24px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
          transition: 0.3s ease;
        }

        .feature-card:hover {
          transform: translateY(-6px);
          background: rgba(255, 255, 255, 0.08);
        }

        .feature-icon {
          width: 60px;
          height: 60px;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.08);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          margin-bottom: 22px;
        }

        .feature-card h3 {
          margin-bottom: 16px;
          font-size: 24px;
        }

        .feature-card p {
          color: #cbd5e1;
          line-height: 1.7;
          font-size: 16px;
        }

        /* ABOUT */

        .about {
          display: flex;
          align-items: center;
          gap: 60px;
          flex-wrap: wrap;
        }

        .about-text {
          flex: 1;
          min-width: 320px;
        }

        .about-text h2 {
          font-size: 52px;
          margin-bottom: 28px;
        }

        .about-text p {
          font-size: 18px;
          line-height: 1.9;
          color: #cbd5e1;
          margin-bottom: 24px;
        }

        .about-box {
          flex: 1;
          min-width: 320px;
          padding: 50px;
          border-radius: 28px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .about-box h3 {
          font-size: 36px;
          margin-bottom: 20px;
        }

        .about-box p {
          color: #cbd5e1;
          line-height: 1.8;
        }

        /* STATS */

        .stats {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 24px;
        }

        .stat-card {
          padding: 38px;
          border-radius: 24px;
          text-align: center;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .stat-card h3 {
          font-size: 46px;
          margin-bottom: 14px;
        }

        .stat-card p {
          color: #cbd5e1;
          font-size: 17px;
        }

        /* CTA */

        .cta {
          text-align: center;
          padding: 100px 8%;
        }

        .cta-box {
          max-width: 900px;
          margin: auto;
          padding: 70px 40px;
          border-radius: 32px;
          background:
            linear-gradient(135deg,
              rgba(255, 255, 255, 0.08),
              rgba(255, 255, 255, 0.03));
          border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .cta-box h2 {
          font-size: 54px;
          margin-bottom: 24px;
        }

        .cta-box p {
          color: #cbd5e1;
          line-height: 1.8;
          font-size: 18px;
          max-width: 700px;
          margin: auto;
          margin-bottom: 40px;
        }
        /* CONTACT MODAL */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 20px;
}

.modal-box {
  width: 100%;
  max-width: 520px;
  background: #111827;
  border-radius: 28px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: modalShow 0.25s ease;
}

@keyframes modalShow {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h2 {
  font-size: 30px;
}

.close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 34px;
  cursor: pointer;
}

.modal-subtitle {
  color: #cbd5e1;
  margin-bottom: 28px;
  line-height: 1.7;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 15px;
  outline: none;
}

/* DROPDOWN OPTIONS */

.contact-form select option {
  background: #111827;
  color: white;
}

.contact-form textarea {
  resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #94a3b8;
}

.submit-btn {
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: white;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

        /* FOOTER */

        footer {
          padding: 50px 8%;
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          text-align: center;
          color: #94a3b8;
          line-height: 1.8;
        }

        /* RESPONSIVE */

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

          .hero-content {
            max-width: 100%;
          }

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

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

          .hero h1 {
            font-size: 56px;
          }
        }

        @media (max-width: 768px) {

          .navbar {
            padding: 20px;
          }

          .hero {
            padding: 140px 20px 80px;
          }

          section {
            padding: 90px 20px;
          }

          .hero h1 {
            font-size: 42px;
          }

          .section-header h2,
          .about-text h2,
          .cta-box h2 {
            font-size: 38px;
          }

          .nav-buttons {
            gap: 10px;
          }

          .nav-btn {
            padding: 10px 18px;
            font-size: 14px;
          }

          .hero-btn {
            width: 100%;
          }
        }

        @media (max-width: 520px) {

          .navbar {
            flex-direction: column;
            gap: 16px;
          }

          .logo {
            font-size: 26px;
          }

          .hero h1 {
            font-size: 36px;
          }

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

          .section-header h2,
          .about-text h2,
          .cta-box h2 {
            font-size: 32px;
          }

          .dashboard-card {
            padding: 18px;
          }

          .mini-card h3 {
            font-size: 22px;
          }
        }