/* ZAK Apps site. Same navy + green as the ring avatar and the YouTube banner.
   Bump the ?v= stamp in every page's <link> whenever this file changes. */
:root {
  --bg: #0f172a;
  --bg-top: #1e3a8a;
  --card: #18254f;
  --card-line: rgba(255, 255, 255, .10);
  --text: #eef2ff;
  --muted: #b9c3e8;
  --accent: #3ddc84;
  --link: #8fb4ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: linear-gradient(160deg, var(--bg-top) 0%, #172a66 30%, var(--bg) 70%) fixed;
  background-color: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: var(--link); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

header.top { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
header.top a.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
header.top img { width: 36px; height: 36px; border-radius: 50%; }
header.top nav { margin-left: auto; display: flex; gap: 18px; font-size: 15px; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover { color: var(--text); }

.hero { text-align: center; padding: 36px 0 28px; }
.hero img { width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.12); }
.hero h1 { margin: 18px 0 6px; font-size: clamp(34px, 6vw, 52px); line-height: 1.1; }
.hero h1 span { color: var(--accent); }
.hero p { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: 19px; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 15px; border: 1px solid var(--card-line); color: var(--text); background: var(--card);
}
.btn.primary { background: var(--accent); color: #0b1a10; border-color: transparent; }

.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 18px 0 40px; }
.app { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-line); }
.app img { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.app h2 { margin: 0; font-size: 18px; }
.app p { margin: 4px 0 8px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.app .links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; font-weight: 600; }

.doc { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: 8px 28px 24px; margin: 8px 0 40px; }
.doc h1 { font-size: 32px; margin: 18px 0 4px; }
.doc h2 { font-size: 21px; margin: 28px 0 6px; color: var(--accent); }
.doc .date { color: var(--muted); margin-top: 0; }
.doc li { margin: 4px 0; }

footer { border-top: 1px solid var(--card-line); padding: 18px 0 32px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--muted); }

@media (max-width: 560px) {
  .doc { padding: 4px 16px 18px; }
  header.top nav { gap: 12px; }
}