/* Mbule.Tech — style.css
   Colour lives in the token block and nowhere else. The two M marks in the page
   carry the brand's own fills and are the only exception. */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/plus-jakarta-sans-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#000000; --ink-2:#3D4147;
  --paper:#E9E7E8; --surface:#FFFFFF;
  --edge:#D5D2D3; --edge-strong:#6B7076;
  --signal:#0E4639; --on-signal:#FFFFFF;
  --focus:#0E4639;
  --ui:"Plus Jakarta Sans","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --max:760px;
  --tap:44px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E9E7E8; --ink-2:#A8B5B0;
    --paper:#0A1512; --surface:#12211C;
    --edge:#1E3A32; --edge-strong:#527A6E;
    --signal:#8BC34A; --on-signal:#2A4010;
    --focus:#8BC34A;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--ui)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}

a{color:var(--signal);text-underline-offset:2px}
a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:var(--on-signal);padding:10px 14px;z-index:10}
.skip:focus{left:8px;top:8px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);color:var(--ink);text-decoration:none;font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.brand svg{width:37px;height:30px;flex:none}
.mt-mark-dark{display:none}
@media (prefers-color-scheme:dark){
  .mt-mark-light{display:none}
  .mt-mark-dark{display:block}
}
.site-header ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.site-header nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;color:var(--ink);font-weight:600;text-decoration:none;border-radius:8px}
.site-header nav a:hover{color:var(--signal);text-decoration:underline}

/* Content */
h1{font-size:clamp(2.25rem,8vw,3.5rem);line-height:1.1;letter-spacing:-.03em;margin:0}
h2{font-size:1.4rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 12px}
h3{font-size:1rem;line-height:1.35;margin:0 0 4px;color:var(--signal)}
p{margin:0 0 14px;max-width:62ch}
section{padding:28px 0 8px}
.hero{padding-top:36px}
.tagline{margin:6px 0 20px;color:var(--ink-2);font-weight:600;font-size:1.1rem}
.lead{font-size:1.25rem;line-height:1.45;font-weight:600;color:var(--ink)}

.toolgrid{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.toolcard{display:block;height:100%;min-height:var(--tap);padding:16px;background:var(--surface);color:var(--ink);border:1px solid var(--edge-strong);border-radius:12px;text-decoration:none}
.toolcard p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.toolcard:hover{border-color:var(--signal)}
.toolcard:hover h3{text-decoration:underline}

.button{display:inline-flex;align-items:center;min-height:var(--tap);padding:10px 18px;background:var(--signal);color:var(--on-signal);font-weight:600;text-decoration:none;border-radius:8px;overflow-wrap:anywhere}
.button:hover{text-decoration:underline}
.button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Footer */
.site-footer{margin-top:40px;padding:20px 0 40px;border-top:1px solid var(--edge-strong);font-size:.92rem;color:var(--ink-2)}
.site-footer p{margin:0 0 8px}
.site-footer ul{display:flex;flex-wrap:wrap;gap:0 16px;list-style:none;margin:0;padding:0}
.site-footer a{display:inline-flex;align-items:center;min-height:var(--tap)}

@media (max-width:420px){
  .site-header{flex-wrap:wrap}
  .brand{font-size:1.15rem}
}