/* ============================================================
   SIMPB BAPETEN — variables.css
   CSS Custom Properties & Global Base
   ============================================================ */
:root {
  --blue-900: #042C53;
  --blue-800: #0C447C;
  --blue-700: #0f5494;
  --blue-600: #185FA5;
  --blue-500: #2475c0;
  --blue-400: #378ADD;
  --blue-300: #6BAEE4;
  --blue-200: #85B7EB;
  --blue-100: #B5D4F4;
  --blue-50:  #E6F1FB;

  --gray-50:  #F8FAFC;
  --gray-100: #F1F4F8;
  --gray-200: #E2E8F0;
  --gray-400: #94A3B8;
  --gray-600: #64748B;

  --green-bg:   #EAF3DE;
  --green-text: #3B6D11;
  --amber-bg:   #FAEEDA;
  --amber-text: #854F0B;
  --red-bg:     #FCEBEB;
  --red-text:   #A32D2D;

  --text-dark:  #0A1628;
  --text-muted: #5F6B7A;

  --shadow-sm: 0 1px 3px rgba(4,44,83,0.08), 0 1px 2px rgba(4,44,83,0.04);
  --shadow-md: 0 4px 16px rgba(4,44,83,0.10);
  --shadow-lg: 0 8px 32px rgba(4,44,83,0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --nav-gradient: linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 60%,var(--blue-600) 100%);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--gray-50);
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: 0; }
p  { margin-bottom: 0; }
a  { text-decoration: none; }

/* ---------- SHARED HELPERS ---------- */
.section-tag {
  display: inline-block;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  border: 1px solid var(--blue-100);
}

.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--blue-900);
  line-height: 1.3;
}

.btn-simpb-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--blue-700);
  color: var(--blue-700);
  background: transparent;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 28px;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.btn-simpb-outline:hover { background: var(--blue-700); color: #fff; }

.btn-simpb-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  color: #fff;
  background: var(--blue-700);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 28px;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
.btn-simpb-primary:hover { background: var(--blue-900); color: #fff; }