/* Palette sampled from the brand mark itself (admin webapp,
     images/a_logo_design_for_image_.png) rather than chosen to look nice
     beside it — the background there is #00071f, and the site was previously a
     warm brown-black that shared nothing with it.

     The three accents are the three things in the logo: the cyan shield, the
     amber bolt, the crimson "tips". Used in that order of prominence, so the
     page reads as the same object as the mark in its corner. */
  :root {
    --ink:      #00071f;   /* the logo's own background */
    --ink-2:    #071132;
    --ink-3:    #0e1a45;
    --line:     #1b2856;
    --text:     #eef3ff;
    --muted:    #8d9bc4;
    --accent:   #029be9;   /* shield cyan — primary action */
    --accent-2: #61ece9;   /* its bright edge, for hover */
    /* The mark's bolt was recoloured into the blue, so this amber now lives
       only in the page — kickers, the hero highlight. Kept because it is
       still the lockup's warm note and the palette needs one. */
    --bolt:     #ffdb4a;
    --crimson:  #ff334b;   /* the "tips" of the wordmark */
    --good:     #61ece9;
    --radius:   14px;
    --wrap:     1140px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
  }

  body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

  a { color: var(--accent-2); }

  h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }

  /* ---------------------------------------------------------------- header */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(0,7,31,.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .bar { display: flex; align-items: center; gap: 28px; height: 68px; }

  /* The header lockup.

     Went text -> image -> back to the drawn lockup. The middle step was right
     at the time: the wordmark PNG was misaligned against the mark, and live
     text sat on a real baseline for free. Once the lockup was built properly —
     mark and wordmark composed together, alignment fixed in the artwork — the
     image became the better answer, because the app and the site now render
     the identical file and cannot drift apart.

     What that costs, honestly: the name is no longer selectable or searchable
     on the page, and it will not recolour from CSS. aria-label on the anchor
     covers the accessible name, so a screen reader still hears "BongoTips". */
  .logo {
    display: flex; align-items: center;
    color: var(--text); text-decoration: none; margin-right: auto;
  }

  /* The drawn lockup — mark and wordmark as one image, so the alignment
     between them is fixed in the artwork rather than re-derived in CSS on
     every surface. Same file the app uses.

     Sized by HEIGHT only. The lockup is 565x188, and constraining the width
     instead would let a narrow header squash it. */
  .lockup    { height: 30px; width: auto; display: block; }

  /* Below the breakpoint the wordmark stops being legible before it stops
     fitting, so the mark takes over. It is a complete, self-contained B — the
     word is what is dropped, never the other way round. */
  .mark-only { height: 32px; width: auto; display: none; }

  nav.links { display: flex; gap: 26px; }
  nav.links a {
    color: var(--muted); text-decoration: none; font-size: .93rem; font-weight: 500;
  }
  nav.links a:hover { color: var(--text); }
  @media (max-width: 820px) { nav.links { display: none; } }

  .btn {
    display: inline-block; padding: 11px 20px; border-radius: 10px;
    font-weight: 600; font-size: .93rem; text-decoration: none;
    border: 1px solid transparent; white-space: nowrap;
  }
  .btn-primary { background: var(--accent); color: #00142b; }
  .btn-primary:hover { background: var(--accent-2); }
  .btn-ghost { border-color: var(--line); color: var(--text); }
  .btn-ghost:hover { border-color: var(--muted); }

  /* ------------------------------------------------------------------ hero */
  .hero { padding: 96px 0 84px; position: relative; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; inset: -40% 30% 40% -20%;
    background: radial-gradient(closest-side, rgba(2,155,233,.18), transparent);
    pointer-events: none;
  }
  .hero .wrap { position: relative; }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
    margin-bottom: 26px;
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }

  h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); font-weight: 800; max-width: 15ch; }
  h1 em { font-style: normal; color: var(--bolt); }

  .slogan {
    margin: 22px 0 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--text); font-weight: 500;
  }
  .lede { margin: 14px 0 0; font-size: 1.06rem; color: var(--muted); max-width: 56ch; }

  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

  /* --------------------------------------------------------------- section */
  section { padding: 78px 0; border-top: 1px solid var(--line); }
  .kicker {
    font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bolt); margin: 0 0 14px;
  }
  h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; max-width: 20ch; }
  .sub { margin: 16px 0 0; color: var(--muted); max-width: 62ch; }

  /* ------------------------------------------------------------------ grid */
  .grid {
    display: grid; gap: 18px; margin-top: 44px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .card {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px 24px;
  }
  .card h3 { font-size: 1.06rem; font-weight: 650; margin-bottom: 9px; }
  .card p { margin: 0; color: var(--muted); font-size: .945rem; }
  .icon {
    width: 34px; height: 34px; border-radius: 9px; margin-bottom: 16px;
    background: var(--ink-3); border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 1rem;
  }

  /* ------------------------------------------------------------- two-column */
  .split { display: grid; gap: 56px; grid-template-columns: 1fr 1fr; align-items: start; }
  @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

  ul.ticks { list-style: none; margin: 26px 0 0; padding: 0; }
  ul.ticks li {
    position: relative; padding-left: 30px; margin-bottom: 15px; color: var(--muted);
  }
  ul.ticks li::before {
    content: "→"; position: absolute; left: 0; top: 0;
    color: var(--bolt); font-weight: 700;
  }
  ul.ticks strong { color: var(--text); font-weight: 600; }

  /* --------------------------------------------------------------- reports */
  .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .chip {
    border: 1px solid var(--line); background: var(--ink-2);
    border-radius: 999px; padding: 9px 17px; font-size: .9rem; color: var(--text);
  }

  /* --------------------------------------------------------------- status */
  .panel {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 34px 32px;
  }
  .panel h3 { font-size: 1.2rem; margin-bottom: 12px; }
  .panel p { color: var(--muted); margin: 0 0 14px; }
  .panel p:last-child { margin-bottom: 0; }

  /* -------------------------------------------------------------- contact */
  .contact { text-align: center; }
  .contact h2 { margin: 0 auto; max-width: 22ch; }
  .contact .sub { margin: 16px auto 0; }
  .contact .cta { justify-content: center; }

  /* --------------------------------------------------------------- footer */
  footer {
    border-top: 1px solid var(--line); padding: 40px 0;
    color: var(--muted); font-size: .88rem;
  }
  .foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
  .foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
  .foot a { color: var(--muted); text-decoration: none; }
  .foot a:hover { color: var(--text); }

  /* --------------------------------------------------- language switcher */
  /* Two languages, so a pair of pills rather than a <select>: one tap, and
     the alternative is visible without opening anything. Sits left of the
     sign-in button and survives the mobile breakpoint that hides the nav —
     a Swahili speaker landing on the English page must be able to leave it. */
  .lang {
    display: flex; gap: 2px; flex: none;
    border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  }
  .lang a {
    padding: 5px 12px; border-radius: 999px; text-decoration: none;
    font-size: .82rem; font-weight: 600; color: var(--muted);
  }
  .lang a:hover { color: var(--text); }
  .lang a[aria-current="true"] { background: var(--ink-3); color: var(--text); }

  /* The name survives much further down now that it is text rather than a
     320px image — it costs nothing and it is the company's name, so it should
     be the last thing to go. The threshold was 620px when it was a picture;
     that was sized for the file, not for the phone.

     420px is where the row genuinely runs out: mark 34 + name ~92 + the
     language pills ~78 + the sign-in button ~85, plus 48 of page padding, is
     about 337 — comfortable at 360, wrapping below it. Under that the mark
     carries the header alone, which is what a self-contained B is for. */
  @media (max-width: 420px) {
    .bar { gap: 12px; }
    .lockup    { display: none; }
    .mark-only { display: block; }
  }

  /* A stand-in for the contact buttons until there is an address to put in
     them. Deliberately quiet: it is a status line, not a call to action, and
     styling it like one would promise something the page cannot deliver. */
  .note {
    margin: 26px auto 0; max-width: 46ch;
    color: var(--muted); font-size: .93rem;
    border: 1px dashed var(--line); border-radius: var(--radius);
    padding: 16px 20px;
  }

  /* The TRA disclosure sits under a full-width grid rather than inside a
     two-column split, so it needs its own top margin — .panel is otherwise only
     ever used as a column. */
  .panel-wide { margin-top: 20px; }