:root {
  --primary: rgb(108, 175, 254);
  --secondary: rgb(242, 129, 37);
  --dark: rgb(25, 45, 117);
  --light: #f5f7fb;
  --gradient: linear-gradient(120deg, var(--primary), var(--secondary));
  --shadow: 0 1.5rem 3rem rgba(12, 22, 52, 0.1);
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: inherit;
  background-color: #fafbff;
  color: #1d2235;
}

.top-strip {
  background: #0b1b4c;
  color: #fefefe;
}

.navbar .brand-logo {
  width: 96px;
  height: auto;
}

.navbar .nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.35rem 0.75rem;
  color: #1d2235;
}

.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
  color: var(--primary);
}

.hero-section {
  background: radial-gradient(circle at top left, rgba(108, 175, 254, 0.8), rgba(25, 45, 117, 0.95)),
    url("https://media.istockphoto.com/id/2200128716/photo/ai-powers-big-data-analysis-and-automation-workflows-showcasing-neural-networks-and-data.webp?a=1&b=1&s=612x612&w=0&k=20&c=Wct3RqstuZiHOEexd0kSDNufRHJZ_ZcCeBUAkbWKjDo=") center/cover no-repeat;
}

.hero-section .hero-subtitle {
  font-size: 1.75rem;
  font-weight: 700;
  display: block;
  width: 100%;
  letter-spacing: 0.08em;
  text-align: center;
}

.hero-section .hero-heading {
  font-size: 2.75rem;
  text-align: center;
}

.hero-media .badge-img {
  width: 200px;
  right: -3rem;
  top: -3rem;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.section-spacing {
  padding: 5rem 0;
}

.heading-section {
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.heading-subtitle {
  letter-spacing: 0.1em;
  color: var(--primary);
  font-weight: 700;
}

.heading-title {
  font-weight: 700;
}

.heading-description {
  color: #5d647b;
}

#courses .card {
  border: none;
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}

#courses .card-img-top {
  height: 220px;
  object-fit: cover;
}

.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}

.list-check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--secondary);
  font-weight: 700;
}

.pricing-card,
.feature-card,
.stats-card,
.startup-card,
.domain-card {
  border: none;
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: 2rem;
  background: #fff;
}

.feature-card .avatar,
.pricing-card .avatar {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.4rem;
}

.domain-search .form-control {
  border-radius: 999px;
  padding-left: 1.5rem;
}

.domain-card {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  background: #fff;
}

.domain-card.bg-primary {
  background: var(--primary);
  color: #fff;
}

.builder-section {
  background: var(--gradient);
}

.stats-section {
  background: linear-gradient(130deg, #0c244c, #1457e6);
}

.stats-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.stats-card .icon-circle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
}

.support-cta {
  background: linear-gradient(120deg, #1457e6, #093088);
}

.startup-card {
  display: block;
  height: 100%;
  background: #0b1b4c;
  color: #fff;
  text-decoration: none;
}

.startup-card img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #ffffff10;
  border-radius: 0.75rem;
  padding: 0.75rem;
}

.startup-card .review-quote {
  font-size: 1.5rem;
  opacity: 0.5;
}

.footer {
  background: #050b1f;
}

.footer-logo {
  width: 120px;
  max-width: 100%;
}

.payment-icon {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}

.payment-logo {
  height: 28px;
  width: auto;
  filter: none;
}

.bg-pattern {
  background: radial-gradient(circle at top right, rgba(20, 87, 230, 0.08), transparent),
    radial-gradient(circle at bottom left, rgba(23, 202, 104, 0.08), transparent);
}

.blog-card img {
  height: 220px;
  object-fit: cover;
}

.blog-card .badge {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.stats-section .heading-section {
  color: #fff;
}

.top-strip a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .hero-media .badge-img {
    display: none;
  }

  .section-spacing {
    padding: 3.5rem 0;
  }

  .navbar .btn {
    width: 100%;
  }
}