/* ── Hero Section ── */

.hero {
	position: relative;
	/* min-height: 100vh; */
	display: flex;
	align-items: center;
	/* padding: 80px 80px 80px; */
	overflow: hidden;
}

/* Multi-layer gradient background */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
	radial-gradient(ellipse 70% 80% at 80% 50%, #1565d8 0%, transparent 60%),
	radial-gradient(ellipse 50% 60% at 100% 30%, #2196f3 0%, transparent 50%),
	linear-gradient(135deg, #0a1628 0%, #0d2050 40%, #0d47a1 100%);
	z-index: 0;
}

/* Subtle noise texture overlay */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	opacity: 0.4;
	z-index: 0;
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  color: #e3eeff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.1s;
}

.badge-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

/* ── Feature Cards ── */
.feature-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.55s;
}

.card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  color: #d6eaff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 8px;
  border-radius: 12px;
  cursor: default;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  min-width: 195px;
}

.card:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(100, 160, 255, 0.4);
  transform: translateY(-2px);
}

.card-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── Animations ── */
@keyframes fadeUp {
  from {
	opacity: 0;
	transform: translateY(20px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero {
	padding: 60px 28px;
  }
  .feature-cards {
	flex-direction: column;
  }
  .card {
	min-width: unset;
	width: 100%;
  }
}

/* ── Offers Section ── */

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a4fa0;
  margin-bottom: 14px;
}

/* Cards grid */
/* .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
} */

/* .cards {
  gap: 24px;
} */

.offercard {
  /* background: #ffffff; */
  border-radius: 20px;
  padding: 36px 32px 32px;
  text-align: left;
  /* border: 1.5px solid #dce5f0; */
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* .offercard:hover {
  box-shadow: 0 12px 40px rgba(26, 79, 160, 0.1);
  transform: translateY(-2px);
} */

.card--featured {
  border-color: #1a4fa0;
  border-width: 2px;
  box-shadow: 0 8px 32px rgba(26, 79, 160, 0.12);
}

.card--featured:hover {
  box-shadow: 0 16px 48px rgba(26, 79, 160, 0.18);
}

.badge-popular {
  position: absolute;
  top: -14px;
  right: 24px;
  /* background: #1a4fa0; */
  background-color: rgb(242 122 124);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 16px;
  border-radius: 20px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dce8f8;
  color: #3a6bbd;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.tag svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.card-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.card-desc {
  font-size: 17px;
  color: #6b7a8d;
  line-height: 1.65;
  margin-bottom: 24px;
}

.features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  padding-left: 0px;
}

.features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #1a2433;
  font-weight: 500;
}

.features li svg {
  flex-shrink: 0;
  color: #1a4fa0;
}

/* Buttons */
.btn-offer {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1.5px solid #dce5f0;
  background: #ffffff;
  color: #0d2d5e;
  letter-spacing: 0.01em;
}

.btn-offer:hover {
  background: #e8f0fb;
  border-color: #1a4fa0;
  color: #1a4fa0;
}

.btn--primary {
  background: #1a4fa0;
  color: #ffffff;
  border-color: #1a4fa0;
}

.btn--primary:hover {
  background: #163d82;
  border-color: #163d82;
  color: #ffffff;
}

.btn--secondary {
  /* background: #ffffff; */
  color:#1a4fa0;
  border-color: #1a4fa0;
}

.btn--secondary:hover {
  /* background: #ffffff; */
  border-color: #163d82;
  color: #163d82;
}