:root{
  --brand:#0d6efd;
  --brand2:#6610f2;
  --dark:#0b1220;
  --soft:#f6f8fc;
  --muted:#667085;
  --radius:18px;
}

/* Global */
body{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: #ffffff;
  color: #111827;
}

a{
  text-decoration: none;
}

/* Navbar */
.navbar{
  backdrop-filter: blur(10px);
}

/* Hero Section (Background Image + Overlay) */
.hero{
  background:
    linear-gradient(rgba(11,18,32,0.75), rgba(13,110,253,0.55)),
    url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 95px 0 70px;
  position: relative;
  overflow: hidden;
}

/* Badge on Hero */
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 14px;
}

.hero h1{
  font-weight: 800;
  letter-spacing: -0.5px;
}

.hero p{
  color: rgba(255,255,255,0.85);
}

/* Hero Small Cards */
.hero-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 22px;
}

/* Section spacing */
.section{
  padding: 70px 0;
}

/* Titles */
.section-title{
  font-weight: 800;
  letter-spacing: -0.4px;
}

/* Soft text */
.text-soft{
  color: var(--muted);
}

/* Background Soft */
.soft-bg{
  background: var(--soft);
}

/* Professional Card */
.card-pro{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
  transition: 0.25s ease;
}

.card-pro:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16,24,40,0.10);
}

/* Icon Pill */
.icon-pill{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,0.12);
  color: var(--brand);
  font-weight: 800;
}

/* Pricing Popular Card */
.pricing-popular{
  border: 2px solid rgba(13,110,253,0.35);
  position: relative;
  overflow: hidden;
}

.pricing-tag{
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(13,110,253,0.12);
  border: 1px solid rgba(13,110,253,0.25);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

/* Divider line */
.divider{
  height: 1px;
  background: rgba(0,0,0,0.06);
}

/* Form Styling */
.form-control, .form-select{
  border-radius: 14px;
  padding: 12px 14px;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(13,110,253,0.6);
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.15);
}

/* Buttons */
.btn{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
}

/* Soft Badge */
.badge-soft{
  background: rgba(13,110,253,0.12);
  color: var(--brand);
  border: 1px solid rgba(13,110,253,0.22);
  font-weight: 700;
}

/* Footer */
.footer{
  background: var(--dark);
  color: white;
  padding: 40px 0;
}

.footer a{
  color: rgba(255,255,255,0.75);
}

.footer a:hover{
  color: white;
}

/* Responsive Fix */
@media (max-width: 768px){
  .hero{
    padding: 70px 0 50px;
  }
}