/* ===========================
   CSS Custom Properties
   =========================== */
:root {
  /* Brand Colors */
  --brand-blue: #2563EB;
  --brand-blue-hover: #1D4ED8;
  --brand-green: #10B981;
  --brand-green-hover: #059669;
  --brand-orange: #F59E0B;
  --brand-orange-hover: #D97706;
  --brand-navy: #1E293B;
  --brand-navy-weak: #334155;
  --brand-white: #F8FAFC;
  
  /* Additional Brand Colors */
  --brand-1: #7AA61C;
  --brand-1-dark: #557316;
  --brand-2: #A1D929;
  --ink: #0D0D0D;
  --surface: #F2F2F2;
  --white: #fff;
  --muted: #6b7280;
  
  /* Design Tokens */
  --brand-radius: 1rem;        /* 16px */
  --brand-radius-sm: .75rem;   /* 12px */
  --brand-shadow: 0 10px 24px rgba(2, 6, 23, .08);
  --brand-shadow-sm: 0 6px 14px rgba(2, 6, 23, .06);
  
  /* Bootstrap Variable Mapping */
  --bs-primary: var(--brand-blue);
  --bs-success: var(--brand-green);
  --bs-warning: var(--brand-orange);
  --bs-dark: var(--brand-navy);
}

/* ===========================
   Global Styles
   =========================== */
* {
  box-sizing: border-box;
}

body {
  color: var(--brand-navy-weak);
  background: var(--brand-white);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-navy);
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--brand-blue-hover);
  text-decoration: underline;
}

/* ===========================
   Layout Components
   =========================== */
.container {
    /*
  max-width: 1180px;
  margin-inline: auto;
  padding: 24px;
  */
}

.section-surface .container .card .bd {
    padding:15px;
}

.section-light .container .card .bd {
    padding:15px;
}

.section-surface .container .btn {
    margin-top: 20px;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Grid Responsive Breakpoints */
@media (max-width: 960px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Section Styles
   =========================== */
.section-light {
  background: var(--white);
}

.section-surface {
  background: var(--surface);
}

.section-navy {
  background: var(--brand-navy);
  color: #E2E8F0;
}

.section-navy a {
  color: #93C5FD;
}

.section-accent {
  background: linear-gradient(0deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .08));
}

.section-hero {
  background: linear-gradient(180deg, var(--white), var(--surface));
}

/* Section Spacing */
.section-pad {
  padding: 48px 0;
}

.section-pad-lg {
  padding: 72px 0;
}

/* ===========================
   Button Components
   =========================== */
.btn {
  display: inline-flex;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--brand-radius);
  font-weight: 600;
  border: 1px solid transparent;
  text-decoration: none;
  box-shadow: none;
}

/* Primary Button */
.btn-primary {
  background: var(--brand-1);
  color: var(--white);
  border-color: var(--brand-1);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-1-dark);
  border-color: var(--brand-1-dark);
}

/* Success Button */
.btn-success {
  background: var(--brand-green);
  border-color: var(--brand-green);
}

.btn-success:hover,
.btn-success:focus {
  background: var(--brand-green-hover);
  border-color: var(--brand-green-hover);
}

/* Outline Buttons */
.btn-outline-primary {
  background: transparent;
  border-color: var(--brand-1);
  color: var(--brand-1);
}

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

.btn-outline-success {
  color: var(--brand-green);
  border-color: var(--brand-green);
  background: transparent;
}

.btn-outline-success:hover {
  color: var(--white);
  background: var(--brand-green);
  border-color: var(--brand-green);
}

/* Utility Buttons */
.btn-ghost {
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-blue);
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.btn-ghost:hover {
  background: rgba(37, 99, 235, 0.16);
}

.btn-linky {
  color: var(--brand-blue);
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-right: 0;
}

.btn-linky:hover {
  color: var(--brand-blue-hover);
  text-decoration: underline;
}

/* ===========================
   Card Components
   =========================== */
.card {
  background: var(--white);
  border: 1px solid rgba(2, 6, 23, .06);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-sm);
}

.card-raise {
  box-shadow: var(--brand-shadow);
}

.card-accent {
  border-color: rgba(245, 158, 11, .35);
}

.card-navy {
  background: var(--brand-navy);
  color: #E2E8F0;
}

.card-navy h1,
.card-navy h2,
.card-navy h3 {
  color: #F8FAFC;
}

/* Feature Tiles */
.feature-tile {
  padding: 1.25rem;
  border-radius: var(--brand-radius);
  border: 1px solid rgba(2, 6, 23, .06);
  background: var(--white);
  transition: transform .15s ease, box-shadow .15s ease;
}

.feature-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--brand-shadow);
}

/* ===========================
   Form Components
   =========================== */
.form-control,
.sppb-form-control {
  border-radius: var(--brand-radius-sm);
  border: 1px solid rgba(2, 6, 23, .12);
}

.form-control:focus,
.sppb-form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}

/* ===========================
   UI Components
   =========================== */
/* Accordion */
.accordion-button {
  color: var(--brand-navy);
}

.accordion-button:not(.collapsed) {
  background: rgba(37, 99, 235, .06);
  color: var(--brand-navy);
}

/* Header Navigation */
.header,
.sp-megamenu-parent > li > a {
  color: var(--brand-white);
}

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    color: var(--brand-orange-hover);
    font-weight: bold;
}

.sticky-header {
  box-shadow: 0 6px 24px rgba(2, 6, 23, .06);
}

.sp-megamenu-parent > li > a:hover {
  color: var(--brand-blue);
}

/* Badges */
.badge-success {
  background: var(--brand-green);
}

.badge-warning {
  background: var(--brand-orange);
  color: #1E293B;
}

/* CTA Band */
.cta-band {
  background: var(--brand-blue);
  color: var(--white);
  border-radius: var(--brand-radius);
  padding: 24px;
}

.cta-band a {
  color: var(--white);
  text-decoration: underline;
}

/* ===========================
   Utility Classes
   =========================== */
.note {
  color: var(--muted);
  font-size: 13px;
}

.price {
  font-variant-numeric: tabular-nums;
}

/* ===========================
   Custom Overrides
   =========================== */
#sp-section-3 > .container {
  margin: 0;
  padding: 0;
  max-width: 100%;
}