.font-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.font-geist {
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

button,
a>button {
    cursor: pointer;
}

/* Gradient text */
.text-gradient-blue {
  background: linear-gradient(122.883deg, rgb(51, 126, 247) 21.332%, rgb(104, 208, 255) 48.053%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.text-gradient-blue-2 {
  background: linear-gradient(129.117deg, rgb(51, 126, 247) 21.332%, rgb(104, 208, 255) 48.053%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: block;
}

/* Badge pill */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 12px 16px;
  border-radius: 19px;
  position: relative;
  background: rgba(37, 199, 247, 0.08);
  backdrop-filter: blur(5px);
  box-shadow: inset 0px 1px 8px 0px rgba(167, 217, 255, 0.1);
  white-space: nowrap;
}

.badge-pill-cyan span {
  color: #24ccfd;
}

/* Hero section */
.hero-section {
  /* background:
    radial-gradient(ellipse 70% 60% at 33% 50%, rgba(37, 110, 184, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 72% 50%, rgba(37, 110, 184, 0.15) 0%, transparent 70%),
    #0B1222; */

  background: #0B1222;
}

.hero-dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 17.75px 17.75px;
  background-position: 0 0;
  opacity: 0.5;
}

/* Feature cards */
.feature-card {
  background: linear-gradient(169.035deg, rgb(11, 21, 41) 60.394%, rgba(27, 120, 163, 0) 107.13%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  height: 100%;
}

/* Feature icon button */
.feature-icon-btn {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0px 42px 107px 0px rgba(87, 177, 255, 0.34),
    0px 24.721px 32.257px 0px rgba(87, 177, 255, 0.19),
    0px 10.268px 13.398px 0px rgba(87, 177, 255, 0.22),
    0px 3.714px 4.846px 0px rgba(87, 177, 255, 0.15);
  overflow: hidden;
}

.feature-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #258ab8, #29bafc);
  border-radius: inherit;
}

.feature-icon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0px 1px 18px 0px #d2eaff, inset 0px 1px 4px 0px #d2eaff;
}

.feature-icon-btn img {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Dashboard */
.dashboard-wrapper {
  width: 100%;
  overflow: hidden;
}

.dashboard-header {
  background: #020509;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-body {
  background: #04080e;
  border: 1px solid #202327;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 24px;
  display: flex;
  gap: 24px;
}

.dashboard-panel {
  background: #0f1a28;
  border: 1px solid rgba(76, 164, 250, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 466px;
  gap: 24px;
}

.dashboard-tab {
  background: #1d2b3e;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 6px 12px;
  border-radius: 6px;
  flex-shrink: 0;
}

.dashboard-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0;
}

.dashboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

.dashboard-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 107px;
}

.bar-blue {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(0.57deg, rgb(51, 126, 247) 44.215%, rgb(104, 208, 255) 100.33%);
  width: 100%;
  flex: 1;
}

.bar-green {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(-42deg, rgb(1, 139, 70) 28.131%, rgb(18, 217, 150) 76.08%);
  width: 100%;
  flex: 1;
}

/* Step number */
.step-number {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.step-number-bg {
  position: absolute;
  inset: 0;
  background: rgba(217, 217, 217, 0.03);
  border: 1.12px solid rgba(72, 158, 250, 0.16);
  border-radius: 11.2px;
}

.step-number-inner {
  position: absolute;
  inset: 5.6px;
  border-radius: 7.467px;
  background: linear-gradient(0.81deg, rgb(51, 126, 247) 44.215%, rgb(104, 208, 255) 100.33%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 22.4px;
  color: white;
}

/* AI section card */
.ai-section-card {
  background: #0c1324;
  border-radius: 19px;
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.ai-icon-container {
  backdrop-filter: blur(17px);
  background: rgba(51, 110, 145, 0.1);
  border-radius: 26px;
  width: 225px;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* AI icon assembled (116x116) */
.ai-icon-wrapper {
  position: relative;
  width: 116px;
  height: 116px;
}

.ai-icon-wrapper img {
  position: absolute;
  display: block;
}

/* CTA section */
.cta-section {
  /* background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(30, 70, 180, 0.4) 0%, rgba(15, 40, 100, 0.25) 45%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(37, 100, 184, 0.2) 0%, transparent 60%),
    #0B1222; */

    background: #0B1222;
}

/* Stats section card borders */
.stat-card-left {
  border-radius: 20px 0 0 20px;
}
.stat-card-right {
  border-radius: 0 20px 20px 0;
}

/* Nav scroll effect */
header.scrolled nav {
  background: rgba(11, 18, 34, 0.9);
}

/* Responsive */
@media (max-width: 1024px) {
  .ai-section-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
  }

  .ai-icon-container {
    width: 100px;
    height: 100px;
  }

  .dashboard-body {
    flex-direction: column;
  }

  .dashboard-panel {
    min-height: 320px;
  }
}

/* Stat divider responsive (mobile=bottom, desktop=right) */
.stat-divider {
  border-bottom: 1px solid rgba(104, 208, 255, 0.12);
}

@media (min-width: 640px) {
  .stat-divider {
    border-bottom: none;
    border-right: 1px solid rgba(104, 208, 255, 0.12);
  }
}

@media (max-width: 768px) {
  .feature-card {
    gap: 24px;
    padding: 24px;
  }

  .ai-section-card {
    padding: 24px;
    gap: 24px;
  }

  .hero-section {
    background:
      radial-gradient(ellipse 90% 50% at 50% 40%, rgba(37, 110, 184, 0.2) 0%, transparent 70%),
      #0B1222;
  }
}