/* Silent Key Technologies, site chrome for every page except the homepage.
   Same tokens, grid background, header and footer as home.css.
   Brand: navy, blue #2e9bff, cyan #22b8ff, gold #c9a84c, Inter, JetBrains Mono. */
:root{
  --bg:#0a0d14; --bg2:#0e121b; --card:#121826; --card2:#161d2e;
  --edge:rgba(46,155,255,.18);         /* blue edge, home.css --line */
  --hair:rgba(234,240,247,.08);        /* hairline, home.css --line2 */
  --line:rgba(234,240,247,.08);        /* component hairline */
  --line2:rgba(234,240,247,.15);       /* stronger component border */
  --ink:#eaf0f7; --ink2:#c6d0de; --mut:#94a0b4; --muted:#94a0b4; --dim:#5f6b7e;
  --accent:#2e9bff; --accent2:#5bb8ff; --cyan:#22b8ff; --accent-dim:rgba(46,155,255,.12);
  --good:#35d0a0; --good-dim:rgba(53,208,160,.12);
  --gold:#c9a84c; --gold-dim:rgba(201,168,76,.12);
  --mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font:var(--sans);
  --max:1240px; --r:16px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(46,155,255,.13), transparent 70%),
    linear-gradient(rgba(46,155,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,155,255,.035) 1px, transparent 1px);
  background-size:100% 100%, 40px 40px, 40px 40px; background-repeat:no-repeat, repeat, repeat }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px }
.mono{ font-family:var(--mono) }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px }

/* ---------- header ---------- */
header.hud{ position:sticky; top:0; z-index:50; background:rgba(10,13,20,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--hair) }
.hud .nav{ display:flex; align-items:center; gap:26px; height:68px }
.brandmark{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.01em; color:var(--ink) }
.brandmark img{ width:26px; height:33px }
.brandmark .bt{ line-height:1.1; font-size:16px }
.brandmark .bt small, .brandmark small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); margin-top:1px }
.hud .sp{ flex:1 }
.hud .link{ font-size:14px; color:var(--ink2); font-weight:500 }
.hud .link:hover, .hud .link[aria-current="page"]{ color:var(--ink) }
.hud .link[aria-current="page"]{ box-shadow:0 2px 0 var(--cyan) }
.status{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:var(--mut); letter-spacing:.06em; white-space:nowrap }
.status i{ width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good); animation:pulse 2.4s infinite }
@keyframes pulse{ 50%{ opacity:.35 } }
.menu-btn{ display:none; background:none; border:1px solid var(--hair); color:var(--ink); border-radius:8px; padding:8px 12px; font:600 13px var(--sans); cursor:pointer }
.mnav{ display:none; flex-direction:column; gap:4px; padding:10px 16px 18px; border-top:1px solid var(--hair) }
.mnav a{ padding:10px 0; color:var(--ink2); font-weight:500 }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:15px; padding:13px 22px; border-radius:10px; background:var(--accent); color:#06101e; border:1px solid var(--accent); cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(46,155,255,.35) }
.btn.ghost{ background:transparent; color:var(--ink); border-color:rgba(234,240,247,.22) }
.btn.ghost:hover{ border-color:var(--accent2); box-shadow:none }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:#1a1608 }
.btn.gold:hover{ box-shadow:0 10px 30px rgba(201,168,76,.3) }
.btn.sm{ padding:9px 16px; font-size:14px }

/* ---------- footer ---------- */
footer.site-foot{ border-top:1px solid var(--hair); padding:56px 0 36px; margin-top:40px }
.foot{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px }
.foot h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); margin-bottom:14px; font-weight:500 }
.foot a{ display:block; color:var(--ink2); font-size:14.5px; padding:4px 0 } .foot a:hover{ color:var(--ink) }
.foot a.brandmark{ display:flex; padding:0 }
.foot .motto{ color:var(--mut); font-size:14.5px; margin-top:14px; max-width:320px }
.foot-bar{ margin-top:40px; padding-top:22px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--dim); font-size:13px }

@media (prefers-reduced-motion: reduce){ .status i{ animation:none } .btn:hover{ transform:none } }
@media (max-width:1180px){ .hud .status{ display:none } }
@media (max-width:1080px){ .foot{ grid-template-columns:1fr 1fr } .hud .nav{ gap:20px } }
@media (max-width:920px){
  .hud .link{ display:none }
  .menu-btn{ display:inline-block }
  .hud.open .mnav{ display:flex }
  .hud .nav{ gap:12px }
}
@media (max-width:760px){
  .wrap{ padding:0 16px }
  .foot{ grid-template-columns:1fr }
}

/* ---------- Refined typography, 18 Oct 2026: matches the block at the end of home.css ---------- */
body{ font-size:15px; background-image:
    radial-gradient(1100px 600px at 50% -12%, rgba(46,155,255,.07), transparent 70%),
    linear-gradient(rgba(234,240,247,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,240,247,.018) 1px, transparent 1px);
  background-size:100% 100%, 48px 48px, 48px 48px }
:root{ --max:1200px }
.hud .nav{ height:60px; gap:24px }
.hud .link{ font-size:13px; letter-spacing:.01em }
.brandmark .bt{ font-size:14.5px; font-weight:600 }
.brandmark small, .brandmark .bt small{ font-size:9.5px }
.brandmark img{ width:22px; height:28px }
.status{ font-size:10.5px } .status i{ animation:none; box-shadow:none; width:6px; height:6px }
.btn{ font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:8px }
.btn:hover{ transform:none; box-shadow:none; background:var(--accent2); border-color:var(--accent2) }
.btn.ghost:hover{ background:rgba(234,240,247,.04) }
.btn.gold:hover{ background:#d6b85f; border-color:#d6b85f }
.btn.sm{ padding:8px 14px; font-size:13px }
footer.site-foot{ padding:48px 0 30px }
.foot h5{ font-size:10px }
.foot a{ font-size:13.5px }
.foot .motto{ font-size:13.5px }
.foot-bar{ font-size:12px }
.lines span{ display:block }
@media (min-width:1081px){ .lines span{ white-space:nowrap } }