/* =========================
   Base & Theming
========================= */
:root { color-scheme: light dark; }

html, body { margin:0; padding:0; }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  color:#1d1d1f;
  background:#fff;
}

a { color:#0071e3; text-decoration:none; font-weight:500; }
a:hover { text-decoration:underline; }
a:focus-visible { 
  outline:2px solid currentColor; 
  outline-offset:2px; 
  border-radius:6px; 
}

/* Dark mode base (does not override your inline styles) */
@media (prefers-color-scheme: dark){
  body { background:#111; color:#e9e9ea; }
  a { color:#79b8ff; }
}

/* =========================
   Unified Header
========================= */
.site-header{
  background:#f5f5f7;
  border-bottom:1px solid #e5e5ea;
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}
.site-header .brand{ font-weight:700; font-size:18px; }
.site-header .brand a{ color:#1d1d1f; text-decoration:none; }
.site-header nav{ display:flex; gap:12px; align-items:center; }
.site-header .primary{ margin-left:auto; }
.site-header a{ color:#0071e3; text-decoration:none; font-weight:500; }
.site-header a:hover{ text-decoration:underline; }
.site-header .lang{ margin-left:8px; color:#6e6e73; }
.site-header .sep{ color:#6e6e73; padding:0 4px; }
.site-header a[aria-current="page"]{
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:700;
}

/* Responsive header */
@media (max-width:680px){
  .site-header{ flex-wrap:wrap; gap:8px; }
  .site-header .primary{ order:3; width:100%; }
  .site-header .lang{ order:2; margin-left:0; }
}

/* Dark mode header */
@media (prefers-color-scheme: dark){
  .site-header{
    background:#121214;
    border-bottom:1px solid #2a2a2c;
  }
  .site-header .brand a{ color:#e9e9ea; }
}

/* =========================
   Common Components
   (works alongside your inline styles)
========================= */

/* Cards */
.card{
  border:1px solid #e5e5ea;
  border-radius:12px;
  padding:16px 18px;
  background:#fff;
  transition:box-shadow .2s;
}
.card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark){
  .card{ background:#1a1a1c; border-color:#2a2a2c; }
}

/* Grids */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

/* Link blocks (index page) */
.links{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

/* Buttons (marketing CTA) */
.btn{
  display:inline-block;
  border:1px solid #e5e5ea;
  border-radius:12px;
  padding:12px 16px;
  text-decoration:none;
  color:#0071e3;
  font-weight:600;
  background:#fff;
  transition:box-shadow .2s, transform .05s ease-in-out;
}
.btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
.btn:active{ transform:translateY(1px); }
@media (prefers-color-scheme: dark){
  .btn{ background:#161618; border-color:#2a2a2c; }
}

/* CTA container */
.cta{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Screenshots */
.screens{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
}
.shot{
  border:1px solid #e5e5ea;
  border-radius:12px;
  object-fit:cover;
  width:100%;
}
@media (prefers-color-scheme: dark){
  .shot{ border-color:#2a2a2c; }
}

/* Utilities */
.text-center{ text-align:center; }
.muted{ color:#6e6e73; font-size:14px; }

/* =========================
   Accessibility & Mobile
========================= */
@media (hover:none){
  /* Larger tap targets on touch devices without breaking inline layout */
  .site-header a,
  .btn{ padding-top:12px; padding-bottom:12px; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}