/* =====================================================
   SPARX SERVICES — DESIGN SYSTEM
   Hybrid v2 | April 2026
   ===================================================== */

/* 1. CSS Custom Properties */
:root {
  /* Brand colours */
  --color-teal:        #1D9E75;
  --color-teal-dark:   #0D7A58;
  --color-blue:        #185FA5;
  --color-purple:      #3A32A0;
  --color-deploy:      #2C5282;

  /* Neutral palette */
  --color-near-black:  #2C2C2A;
  --color-body:        #4A4A48;
  --color-mid-grey:    #6B6A65;
  --color-light-grey:  #9A9994;
  --color-off-white:   #F5F4F1;
  --color-border:      #E0DED8;

  /* Gradients */
  --gradient-hero: linear-gradient(140deg, #0D7A58 0%, #1D9E75 28%, #185FA5 62%, #3A32A0 100%);
  --gradient-cta:  linear-gradient(135deg, #1D9E75 0%, #185FA5 100%);

  /* Typography */
  --font-primary: 'DM Sans', sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-pad:   80px;

  /* Radii */
  --radius-btn:  6px;
  --radius-card: 10px;

  /* Shadows */
  --shadow-card:       0 2px 12px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.12);
}

/* 2. Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-primary); color: var(--color-body); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-primary); }

/* 2. Container */
.container { max-width: var(--container-max); margin: 0 auto; padding: var(--container-pad); }

/* 3. Typography scale */
h1, .h1 { font-size: 50px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--color-near-black); }
h2, .h2 { font-size: 36px; font-weight: 700; line-height: 1.2; color: var(--color-near-black); }
h3, .h3 { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--color-near-black); }
h4, .h4 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--color-body); }
p { font-size: 17px; line-height: 1.7; color: var(--color-body); }
.lead { font-size: 18px; line-height: 1.75; }
.small { font-size: 15px; line-height: 1.65; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid-grey); margin-bottom: 12px; }
.metadata { font-size: 13px; color: var(--color-light-grey); }

/* 4. Colour utilities */
.text-teal    { color: var(--color-teal); }
.text-blue    { color: var(--color-blue); }
.text-purple  { color: var(--color-purple); }
.text-white   { color: #fff; }
.bg-off-white { background: var(--color-off-white); }
.bg-dark      { background: #2C2C2A; }

/* 5. Section spacing */
.section { padding: var(--section-pad); }
.section--tight { padding: 48px 0; }
.section--wide  { padding: 100px 0; }

/* 6. Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 24px; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 600; line-height: 1;
  background: var(--color-teal); color: #fff;
  transition: background 0.2s ease, transform 0.15s ease;
  border: none;
}
.btn-primary:hover { background: var(--color-teal-dark); transform: translateY(-1px); }
.btn-primary--blue   { background: var(--color-blue); }
.btn-primary--blue:hover { background: #144d88; }
.btn-primary--purple { background: var(--color-purple); }
.btn-primary--purple:hover { background: #4038a0; }
.btn-primary--deploy { background: var(--color-deploy); }
.btn-primary--deploy:hover { background: #1e3a5f; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 24px; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 600; line-height: 1;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  transition: border-color 0.2s, background 0.2s;
}
.btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 600;
  background: transparent; color: var(--color-teal);
  border: 1.5px solid var(--color-teal);
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--color-teal); color: #fff; }

/* 7. Stage badges */
.badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 3px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.badge--teal   { background: rgba(29,158,117,0.1); color: var(--color-teal); }
.badge--blue   { background: rgba(24,95,165,0.1);  color: var(--color-blue); }
.badge--purple { background: rgba(83,74,183,0.1);  color: var(--color-purple); }
.badge--deploy { background: rgba(44,82,130,0.1);  color: var(--color-deploy); }

/* 8. Cards */
.card {
  background: #fff; border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.card--teal   { border-top: 3px solid var(--color-teal); }
.card--blue   { border-top: 3px solid var(--color-blue); }
.card--purple { border-top: 3px solid var(--color-purple); }
.card--deploy { border-top: 3px solid var(--color-deploy); }

/* 9. Dividers */
hr.sparx-divider { border: none; border-top: 1px solid var(--color-border); margin: 40px 0; }