/* FotoSort — Improvements Layer */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap');

:root {
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Wordmark ── */
.wordmark {
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Badge strip ── */
.badge-strip {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 28px;
}
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.22);
  color: var(--yellow-text); font-family: var(--mono);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; padding: 6px 12px; border-radius: 4px;
}
.badge svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Before / After ── */
.before-after { padding: 70px 0; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.ba-pane { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ba-pane.after { border-color: rgba(245,197,24,.35); }
.ba-label {
  padding: 10px 18px; font-family: var(--mono); font-size: .72rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid var(--border);
}
.ba-pane.before .ba-label { color: var(--error); background: rgba(192,57,43,.08); }
.ba-pane.after  .ba-label { color: var(--yellow); background: rgba(245,197,24,.06); }
.ba-tree { padding: 20px 22px; font-family: var(--mono); font-size: .82rem; line-height: 1.9; color: var(--muted); white-space: pre; }
.ba-tree .dir  { color: var(--text); font-weight: 700; }
.ba-tree .file { color: var(--muted); }
.ba-tree .hi   { color: var(--yellow); }
.ba-arrow { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--yellow); align-self: center; }

/* ── macOS window frame ── */
.mac-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-2); box-shadow: 0 32px 100px rgba(0,0,0,.65); }
.mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: #1a1a1a; padding: 12px 16px; border-bottom: 1px solid #222;
}
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
.mac-dot.r { background: #ff5f57; }
.mac-dot.y { background: #febc2e; }
.mac-dot.g { background: #28c840; }
.mac-title { flex: 1; text-align: center; font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.mac-frame img { display: block; width: 100%; }

/* ── Feature grid improvements ── */
.feat-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(245,197,24,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feat-icon svg { width: 20px; height: 20px; stroke: var(--yellow); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── Safety strip ── */
.safety-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.safety-card { background: rgba(61,139,94,.07); border: 1px solid rgba(61,139,94,.25); border-radius: 12px; padding: 24px; }
.safety-card .s-icon { font-size: 1.4rem; margin-bottom: 12px; }
.safety-card h4 { margin: 0 0 8px; color: var(--text); font-size: 1rem; }
.safety-card p { margin: 0; color: var(--muted); font-size: .88rem; }

/* ── Privacy row ── */
.privacy-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.priv-card { text-align: center; padding: 32px 20px; }
.priv-card .p-num { font-size: 2.8rem; font-weight: 800; color: var(--yellow); line-height: 1; margin-bottom: 10px; }
.priv-card h4 { margin: 0 0 8px; font-size: 1rem; }
.priv-card p { margin: 0; color: var(--muted); font-size: .86rem; }

/* ── Screenshots row ── */
.screens-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 32px; }
.screen-thumb { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.screen-thumb img { display: block; width: 100%; }
.screen-cap { padding: 12px 14px; font-family: var(--mono); font-size: .76rem; color: var(--muted); background: var(--panel); border-top: 1px solid var(--border); }

/* ── Donate callout ── */
.donate-callout { background: rgba(245,197,24,.05); border: 1px solid rgba(245,197,24,.2); border-radius: 16px; padding: 40px; display: flex; align-items: center; gap: 40px; }
.donate-callout .dc-text h3 { margin: 0 0 8px; font-size: 1.5rem; }
.donate-callout .dc-text p  { margin: 0; color: var(--muted); max-width: 500px; }
.donate-callout .dc-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ── Section divider label ── */
.section-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.section-tag::before { content: ''; display: block; width: 24px; height: 2px; background: var(--yellow); border-radius: 2px; }

/* ── Responsive patches ── */
@media (max-width: 860px) {
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); }
  .safety-strip, .privacy-row { grid-template-columns: 1fr 1fr; }
  .screens-row { grid-template-columns: 1fr 1fr; }
  .donate-callout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .safety-strip, .privacy-row, .screens-row { grid-template-columns: 1fr; }
}