* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden;
}
:root {
  --main-bg: #0d0f1b;
  --accent: #ff5722;
  --accent-light: #ff8a50;
  --text-light: #f5f5f5;
  --text-muted: #cccccc;
  --section-dark: #1a1d2b;
  --section-light: #2b2f3f;
  --border-radius: 1rem;
}

body {
  background-color: var(--main-bg);
  color: var(--text-light);
  font-family: "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

h2,
h3,
h4,
h5 {
  color: var(--text-light);
}

.text-accent {
  color: var(--accent) !important;
}

.bg-accent {
  background-color: var(--accent) !important;
}

.btn-accent {
  background-color: var(--accent);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  border-radius: var(--border-radius);
  transition: 0.3s ease;
}

.btn-accent:hover {
  background-color: var(--accent-light);
  color: #000;
}
.bg-gradient-primary {
  background: linear-gradient(90deg, #4caf50, #111820, #e85f00);
}

.text-accent {
  color: #ffc107;
}

.navbar-nav .nav-link {
  color: #ffffff;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #ffc107;
}

footer a:hover {
  color: #ffc107 !important;
}

.hero-section {
  background: linear-gradient(135deg, #0e1116 0%, #111820 100%);
  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
}

.btn-accent {
  background-color: #ff6f00;
  color: #fff;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-accent:hover {
  background-color: #e85f00;
  color: #fff;
}

.floating {
  animation: floatY 3s ease-in-out infinite;
}

@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
.features-section {
  background-color: var(--section-dark);
}

.feature-card {
  background-color: var(--section-light);
  border-radius: var(--border-radius);
  transition: 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 87, 34, 0.2);
}

.solution-section .problem-box,
.solution-section .solution-box {
  background-color: var(--section-light);
  border-left: 5px solid var(--accent);
  border-radius: var(--border-radius);
}

.solution-section .problem-box h5 {
  color: #ff4e4e;
}

.solution-section .solution-box h5 {
  color: #4caf50;
}
.pricing-section .card {
  border-radius: var(--border-radius);
  transition: 0.3s ease;
}

.pricing-section .card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(255, 87, 34, 0.25);
}

.pricing-section .btn {
  border-radius: 2rem;
}
.cta-section {
  background: linear-gradient(135deg, var(--accent) 0%, #ff7043 100%);
  padding: 5rem 1rem;
}

.cta-section .btn-accent {
  background-color: #fff;
  color: var(--accent);
  font-size: 1.2rem;
  padding: 0.75rem 2rem;
  border-radius: 2rem;
  transition: all 0.3s ease;
}

.cta-section .btn-accent:hover {
  background-color: var(--main-bg);
  color: #fff;
  border: 1px solid #fff;
}
@media (max-width: 768px) {
  h2 {
    font-size: 1.8rem;
  }

  .btn-accent {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
  }
}