:root {
  --color-title: #040f16;
  --color-subtitle: #088ba8;
  --color-text: #646f79;
  --color-contrast: #a5a8ad;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  font-weight: 400;
  font-size: 18px;
}

h1, h2, h3, .title-main {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-title);
  font-weight: 700;
}

h1 { font-size: 38px; }

.title-sub, h2.title-sub, h3.title-sub {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-subtitle);
  font-weight: 700;
  font-size: 38px;
}

.navbar-brand {
  font-weight: 700;
  color: var(--color-title) !important;
}

.nav-link {
  color: var(--color-text) !important;
  font-weight: 500;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-subtitle) !important;
}

.btn-primary {
  background-color: var(--color-subtitle);
  border-color: var(--color-subtitle);
  font-weight: 700;
}

.btn-primary:hover {
  background-color: #066d85;
  border-color: #066d85;
}

.btn-outline-primary {
  color: var(--color-subtitle);
  border-color: var(--color-subtitle);
  font-weight: 700;
}

.btn-outline-primary:hover {
  background-color: var(--color-subtitle);
  border-color: var(--color-subtitle);
}

section {
  padding: 50px 0;
}

.hero {
  background: linear-gradient(135deg, #040f16 0%, #0a2530 60%, #088ba8 140%);
  color: #fff;
  padding: 156px 0 130px;
  min-height: 832px;
  display: flex;
  align-items: center;
}

.hero h1 {
  color: #fff;
}

.hero .lead {
  color: #d6dde1;
  font-size: 20px;
}

.hero .badge-soft {
  background-color: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-subtitle);
}

.icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: rgba(8, 139, 168, 0.1);
  color: var(--color-subtitle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.feature-card {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 16px;
  padding: 32px;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(4, 15, 22, 0.08);
}

.feature-card h3 {
  font-size: 22px;
  margin-top: 20px;
}

.feature-card ul li {
  margin-bottom: 8px;
}

.feature-card ul li::marker {
  color: var(--color-subtitle);
}

.bg-light-soft {
  background-color: #f5f7f8;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.check-list i {
  color: var(--color-subtitle);
  font-size: 22px;
  margin-top: 2px;
}

.placeholder-img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  display: block;
}

footer {
  background-color: var(--color-title);
  color: var(--color-contrast);
}

footer a {
  color: var(--color-contrast);
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}

.form-label {
  color: var(--color-title);
  font-weight: 500;
}

.stat-number {
  font-size: 34px;
  font-weight: 700;
  color: var(--color-subtitle);
}

.screenshot-carousel .carousel-item img {
  border-radius: 16px;
}

.screenshot-carousel .carousel-control-prev,
.screenshot-carousel .carousel-control-next {
  width: 5%;
}

.screenshot-carousel .carousel-control-prev-icon,
.screenshot-carousel .carousel-control-next-icon {
  background-color: var(--color-subtitle);
  border-radius: 50%;
  padding: 18px;
}

.screenshot-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--color-subtitle);
}

#msgSubmit {
  font-size: 1rem;
  font-weight: 500;
}

@media (max-width: 768px) {
    #containerReverse {
        flex-direction: column-reverse;
    }
}