:root { --fg:#111; --muted:#666; --bg:#fff; --line:#eee; }
:root { --step-0: clamp(15px, 1vw + 12px, 17px); }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:var(--step-0)/1.55 system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:980px;margin:auto;padding:20px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{
  font-weight:700;
  text-decoration:none;
  color:var(--fg);
  font-size:28px;       /* increased logo size */
  letter-spacing:-0.5px; /* tighter, modern feel */
}
nav a{margin-left:16px;text-decoration:none;color:var(--fg)}
.hero{padding:60px 20px}
.lead{font-size:1.2rem;color:var(--muted);max-width:42rem}
.row{display:flex;flex-wrap:wrap;align-items:center}
.gap>*{margin-right:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:#000;color:#fff;text-decoration:none;border:1px solid #000}
.btn.outline{background:transparent;color:#000}
.card{border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.foot{border-top:1px solid var(--line);margin-top:40px}
/* Dark mode (body.dark) */
body.dark { --bg:#0b0b0d; --fg:#f2f3f5; --muted:#a9b0b7; --line:#26272b; }
body.dark .btn{ background:#f2f3f5; color:#0b0b0d; border-color:#f2f3f5 }
body.dark .btn.outline{ background:transparent; color:#f2f3f5; border-color:#a9b0b7 }


/* --- App Store layout additions --- */
.page { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.sidebar { position: sticky; top: 16px; align-self: start; height: max-content; }
.sidecard { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.side a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--fg); }
.side a.active { 
  background: color-mix(in oklab, var(--fg) 8%, var(--bg));
  font-weight: 600;
}
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid #7b61ff;
  outline-offset: 2px;
  border-radius: 6px;
}
.content { min-height: 70vh; }
.section { scroll-margin-top: 90px; margin-bottom: 28px; }
.section h2 { margin: 0 0 8px; }
.section .muted { margin: 0 0 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.app { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
       border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.app .icon { width: 48px; height: 48px; border-radius: 12px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 700; }
.ipurple{background: linear-gradient(135deg,#7b61ff,#6a39ff)}
.iblue{background: linear-gradient(135deg,#3a86ff,#2563eb)}
.icyan{background: linear-gradient(135deg,#00bcd4,#2196f3)}
.igreen{background: linear-gradient(135deg,#22c55e,#16a34a)}
.iorange{background: linear-gradient(135deg,#fb923c,#f97316)}
.ired{background: linear-gradient(135deg,#ef4444,#f43f5e)}
.igrey{background: linear-gradient(135deg,#64748b,#334155)}

/* Responsive: stack sidebar on small screens */
@media (max-width: 900px){
  .page { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .side { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .side a { text-align: center; }
}
/* Respect system dark mode in addition to manual body.dark */
@media (prefers-color-scheme: dark){
  :root { color-scheme: dark; }
  body { background: #0b0b0d; color:#f2f3f5; }
}

/* Subtle hover feedback */
.btn:hover { filter: brightness(0.95); }
.side a:hover { background: color-mix(in oklab, var(--fg) 5%, var(--bg)); }

@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}