:root {
  --ink: #0a0d0c;
  --ink-soft: #171b19;
  --panel-dark: #111614;
  --paper: #ffffff;
  --canvas: #f4f6f5;
  --line: #dfe4e1;
  --muted: #67706b;
  --muted-light: #aeb6b1;
  --lime: #0f766e;
  --lime-strong: #115e59;
  --lime-soft: #d9f5ed;
  --mint-gradient: linear-gradient(135deg, #0f766e, #14b86e);
  --mint-wash: radial-gradient(circle at top left, rgba(20, 184, 110, .2), transparent 38%), radial-gradient(circle at 88% 18%, rgba(15, 118, 110, .2), transparent 32%), linear-gradient(135deg, #edf9f3 0%, #e2f7ed 46%, #ccefe1 100%);
  --warning: #f9b800;
  --danger: #d83333;
  --success: #0f766e;
  --vodacom: #e60000;
  --mtn: #ffcb05;
  --star: #ffb800;
  --shadow-sm: 0 8px 24px rgba(8, 15, 11, 0.06);
  --shadow-md: 0 22px 60px rgba(8, 15, 11, 0.12);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --container: 1440px;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
a:active,
a:focus,
a:hover { color: inherit; }
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}
button, input, select, textarea { font: inherit; }
button {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.04em; line-height: 1.05; }
h1 { font-size: clamp(2.5rem, 5vw, 5rem); }
h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
h3 { font-size: 1.15rem; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding-block: 80px; }
.muted-section { background: var(--canvas); }
.narrow-wide { max-width: 1260px; }
.small-copy { color: var(--muted); font-size: .85rem; }