:root{
    --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --ink:#e6edf3; --muted:#8b98a9;
    --line:#2a313c; --accent:#3fb950; --accent2:#2f81f7; --chip:#21262d; --danger:#e5534b;
  }
  [data-theme="light"]{
    --bg:#f6f8fa; --panel:#ffffff; --panel2:#f0f3f7; --ink:#1c2128; --muted:#57606a;
    --line:#d0d7de; --accent:#1a7f37; --accent2:#0969da; --chip:#eaeef2; --danger:#cf222e;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;
  }
  .wrap{max-width:820px; margin:0 auto; padding:28px 20px 80px}
  header.hero{
    background:linear-gradient(135deg,var(--panel),var(--panel2));
    border:1px solid var(--line); border-radius:16px; padding:34px 30px; position:relative; overflow:hidden;
  }
  header.hero::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
    background:radial-gradient(circle,var(--accent) 0%,transparent 70%); opacity:.10}
  .wordmark{font-size:34px; font-weight:800; letter-spacing:-.5px; margin:0}
  .wordmark .sub{font-weight:400; color:var(--muted); font-size:26px; letter-spacing:0}
  .wordmark .dot{color:var(--accent)}
  .tag{color:var(--muted); font-size:15px; margin:8px 0 0; max-width:60ch}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
  .chip{background:var(--chip); border:1px solid var(--line); color:var(--ink);
    padding:4px 11px; border-radius:20px; font-size:12.5px; font-weight:500}
  .toggle{position:absolute; top:18px; right:18px; background:var(--chip); border:1px solid var(--line);
    color:var(--ink); border-radius:20px; padding:6px 13px; font-size:12.5px; cursor:pointer; z-index:2}
  section{margin-top:26px}
  h2{font-size:13px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent);
    margin:0 0 12px; font-weight:700}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px}
  .lead{font-size:17px; line-height:1.7; margin:0}
  .lead + p{margin-bottom:0}
  table{width:100%; border-collapse:collapse; font-size:14.5px}
  td{padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:top}
  tr:last-child td{border-bottom:none}
  td.k{color:var(--muted); width:38%; font-weight:500}
  .flow{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
  .step{flex:1 1 150px; background:var(--panel2); border:1px solid var(--line); border-radius:10px;
    padding:14px; text-align:center}
  .step .n{display:inline-block; width:26px; height:26px; line-height:26px; border-radius:50%;
    background:var(--accent); color:#fff; font-weight:700; font-size:13px; margin-bottom:8px}
  .step .t{font-weight:600; font-size:14px}
  .step .d{color:var(--muted); font-size:12.5px; margin-top:3px}
  .arrow{align-self:center; color:var(--muted); font-size:20px; flex:0 0 auto}
  @media(max-width:559px){.arrow{display:none}}
  @media(min-width:640px){.dual{grid-template-columns:1.15fr 1fr; gap:26px !important}}
  .routes{display:grid; gap:12px; margin-top:4px}
  .route{border:1px solid var(--line); border-radius:10px; padding:15px 17px; background:var(--panel2)}
  .route p{margin:8px 0 0; font-size:14px; color:var(--muted)}
  .route.no{opacity:.9}
  .route.yes{background:linear-gradient(135deg,rgba(63,185,80,.10),transparent 65%);
    border-color:var(--accent); border-width:2px; box-shadow:0 0 0 3px rgba(63,185,80,.07)}
  .route.yes p{color:var(--ink)}
  .rhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .rname{font-weight:700; font-size:15.5px}
  .mark{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
    border-radius:50%; font-size:14px; font-weight:700; flex:0 0 auto}
  .mark.x{background:var(--danger); color:#fff}
  .mark.chk{background:var(--accent); color:#fff}
  .ours{margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
    letter-spacing:.6px; text-transform:uppercase; padding:3px 10px; border-radius:20px}
  .founders{display:grid; grid-template-columns:1fr; gap:12px}
  @media(min-width:560px){.founders{grid-template-columns:1fr 1fr}}
  .person{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:16px}
  .person .nm{font-weight:700; font-size:16px}
  .person .rl{color:var(--accent2); font-size:13.5px; margin:2px 0 6px}
  .person .bi{color:var(--muted); font-size:13px}
  .cta{display:inline-block; background:var(--accent); color:#fff; font-weight:600; font-size:15px;
    padding:11px 22px; border-radius:9px; margin-top:4px}
  .cta:hover{text-decoration:none; opacity:.9}
  footer{margin-top:36px; text-align:center; color:var(--muted); font-size:12px; line-height:1.8}
  a{color:var(--accent2); text-decoration:none} a:hover{text-decoration:underline}

  /* ---- site nav ---- */
  nav.topbar{max-width:820px; margin:0 auto; padding:18px 20px 0; display:flex;
    align-items:center; gap:22px; flex-wrap:wrap}
  nav.topbar .brand{font-weight:800; font-size:18px; letter-spacing:-.3px; color:var(--ink)}
  nav.topbar .brand:hover{text-decoration:none}
  nav.topbar .brand .dot{color:var(--accent)}
  nav.topbar .links{display:flex; gap:20px; margin-left:auto; align-items:center; flex-wrap:wrap}
  nav.topbar .links a{color:var(--muted); font-size:14.5px; font-weight:500}
  nav.topbar .links a:hover{color:var(--ink); text-decoration:none}
  nav.topbar .links a.on{color:var(--accent); font-weight:600}
  .navtoggle{background:var(--chip); border:1px solid var(--line); color:var(--ink);
    border-radius:20px; padding:5px 12px; font-size:12.5px; cursor:pointer}
  .pagehead{border:1px solid var(--line); border-radius:16px; padding:30px;
    background:linear-gradient(135deg,var(--panel),var(--panel2))}
  .pagehead h1{margin:0; font-size:29px; letter-spacing:-.4px}
  .pagehead p{color:var(--muted); margin:8px 0 0; max-width:62ch}

  /* ---- contact form ---- */
  form.cf{display:grid; gap:15px}
  .fgrid{display:grid; gap:15px}
  @media(min-width:560px){.fgrid{grid-template-columns:1fr 1fr}}
  .field{display:flex; flex-direction:column; gap:6px}
  .field label{font-size:13px; font-weight:600; color:var(--ink)}
  .field label .req{color:var(--danger); font-weight:400}
  .field input,.field select,.field textarea{
    background:var(--bg); border:1px solid var(--line); color:var(--ink); border-radius:8px;
    padding:10px 12px; font:inherit; font-size:14.5px; width:100%; transition:border-color .15s}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(63,185,80,.13)}
  .field textarea{min-height:130px; resize:vertical}
  .field .hint{font-size:12px; color:var(--muted)}
  button.submit{background:var(--accent); color:#fff; border:none; border-radius:9px;
    padding:12px 26px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
    justify-self:start; transition:opacity .15s}
  button.submit:hover{opacity:.9}
  button.submit:disabled{opacity:.55; cursor:not-allowed}
  .formnote{font-size:12.5px; color:var(--muted); margin:0}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .alert{border-radius:9px; padding:13px 16px; font-size:14.5px; display:none}
  .alert.ok{display:block; background:rgba(63,185,80,.13); border:1px solid var(--accent); color:var(--ink)}
  .alert.err{display:block; background:rgba(229,83,75,.12); border:1px solid var(--danger); color:var(--ink)}