:root {
  --primary: #12225c;
  --accent: #10b66a;
  --bg: #ffffff;
  --surface: #f5f8fc;
  --surface-2: #eef5ff;
  --ink: #102033;
  --muted: #627089;
  --border: 1px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
}

.btn-primary {
  background-image: linear-gradient(to right, #0954b5 0, #12225c 100%);
  border: none;
  color: white;
}

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.drawer-panel {
  background: #ffffff;
}

.bg-radial-blue {
  background:
    radial-gradient(circle at top right, rgba(16, 182, 106, 0.28), transparent 16rem),
    linear-gradient(135deg, #071434, #0b2f79 55%, #061128);
}

.bg-market {
  background: linear-gradient(rgba(4, 15, 42, 0.82), rgba(4, 15, 42, 0.72)), linear-gradient(135deg, #15213b, #35415a);
}

.bg-city {
  background: linear-gradient(rgba(8, 17, 50, 0.18), rgba(8, 17, 50, 0.18)), linear-gradient(135deg, #d1d5db, #eef2f7);
}

.bg-trade {
  background: linear-gradient(rgba(7, 20, 52, 0.68), rgba(7, 20, 52, 0.78)), linear-gradient(135deg, #071434, #103f92);
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.75rem);
}

.phone-shell {
  border: 0.55rem solid #111827;
  border-radius: 2.2rem;
  background: #f8fafc;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.phone-top {
  width: 6rem;
  height: 1.2rem;
  border-radius: 999rem;
  background: #111827;
  margin: 0.55rem auto;
}

.chart-line {
  height: 8rem;
  background:
    linear-gradient(135deg, transparent 16%, rgba(16, 182, 106, 0.22) 17%, transparent 18%),
    linear-gradient(25deg, transparent 35%, rgba(11, 86, 197, 0.28) 36%, transparent 37%),
    linear-gradient(#dbeafe, #eff6ff);
}

.forex-watermark {
  color: rgba(15, 23, 42, 0.05);
  letter-spacing: 0;
}

.banner-img {
  max-height: 13rem;
  object-fit: contain;
  object-position: center;
}

.feature-dot::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  border-radius: 999rem;
  background: var(--accent);
}

.product {
  .tabs input {
    padding: 0;
    margin-right: 1.5rem;

    &::after {
      @apply text-lg;
    }

    &:checked::after {
      @apply text-primary;
    }
  }

  .table {
    tbody {
      tr {
        &:where(:nth-child(even)) {
          background-color: #f0f0f0 !important;
        }

        td {
          text-align: center;
        }

        th {
          @apply text-primary font-medium min-w-8;
        }
      }
    }
  }
}

.advantages > div {
  background-image: linear-gradient(to right, #0954b53e 0, #12225c39 100%);
  border: 1px solid #ffffff30;
  width: fit-content;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.page-item {
  margin: 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.875rem;

  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;

  text-decoration: none;
  transition: all 0.2s;
}

.page-link:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.page-item.active .page-link {
  color: #fff;
  background: #12225c;
  border-color: #12225c;
}

.page-item.disabled .page-link {
  color: #9ca3af;
  background: #f9fafb;
  border-color: #e5e7eb;
  cursor: not-allowed;
  pointer-events: none;
}