/* Dea Dardanica: the same folio as the app. Hairline boxes with "+" corners,
   mono labels, a serif title, Geist for the rest, monochrome. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Dea Elbasan"; src: url("/assets/fonts/NotoSansElbasan-Regular.ttf") format("truetype"); }
@font-face { font-family: "Dea Vithkuqi"; src: url("/assets/fonts/NotoSansVithkuqi-Regular.ttf") format("truetype"); }

:root {
  --bg: #101214;
  --text: #E8EAEC;
  --muted: #AAB1B8;
  --faint: #8B9298;
  --border: #2B3034;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "TeX Gyre Pagella", "P052", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font: 14px/1.6 "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: var(--gutter) max(16px, var(--gutter));
}
/* Hyjnesha në Fron, carved faintly into the bottom right, like the app's screens. */
body::after {
  content: "";
  position: fixed;
  right: 0; bottom: 0;
  width: min(70vw, 900px);
  aspect-ratio: 3 / 2;
  background: url("/assets/img/hyjnesha.svg") right bottom / contain no-repeat;
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}
a { color: inherit; }
::selection { background: #3A4046; }

.folio, .box { position: relative; border: 1px solid var(--border); }
.folio::before, .folio::after, .box::before, .box::after {
  content: "+";
  position: absolute;
  font: 14px/10px var(--mono);
  color: var(--faint);
  background: var(--bg);
  pointer-events: none;
}
.folio::before, .box::before { left: -5px; top: -5px; }
.folio::after, .box::after { right: -5px; bottom: -5px; }

.folio { z-index: 1; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; }
.masthead, .colophon {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 18px 28px;
  color: var(--faint);
  font: 10px/1.5 var(--mono);
  letter-spacing: 1.2px;
}
.masthead { border-bottom: 1px solid var(--border); }
.colophon { border-top: 1px solid var(--border); letter-spacing: .4px; }
.masthead a, .colophon a { text-decoration: none; }
.masthead a:hover, .colophon a:hover { color: var(--text); }

.label { margin: 0; color: var(--faint); font: 400 10px/1.7 var(--mono); letter-spacing: .06em; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 36px);
}
h1 {
  margin: 0 0 14px;
  font: 400 clamp(44px, 7vw, 76px)/.95 var(--serif);
  letter-spacing: -.04em;
}
.hero-text p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 15px; line-height: 1.7; }
.cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn-solid {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--text);
  border-radius: 3px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.btn-solid:hover { background: #fff; }
.btn-solid:focus-visible, .files a:focus-visible, .all:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }
.cta-meta { color: var(--faint); font: 10px/1.5 var(--mono); letter-spacing: .06em; }

.sign { margin: 0; width: clamp(220px, 28vw, 300px); aspect-ratio: 1; cursor: pointer; }
.sign canvas { display: block; width: 100%; height: 100%; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  padding: 0 clamp(20px, 4vw, 36px);
}
.fact { padding: 16px 18px 18px; }
.fact p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.downloads { margin: 36px clamp(20px, 4vw, 36px); padding: 16px 18px 14px; scroll-margin-top: 24px; }
.downloads-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.row.here .os { color: var(--text); }
.os { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 13px; }
.os small { color: var(--faint); font: 10px var(--mono); letter-spacing: .04em; }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.files a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
  text-decoration: none;
}
.files a:hover { border-color: var(--faint); }
.files a small { color: var(--faint); font: 10px var(--mono); }
.all { display: inline-block; margin-top: 12px; color: var(--faint); font: 10px/1.5 var(--mono); letter-spacing: .06em; text-decoration: none; }
.all:hover { color: var(--text); }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  /* On a phone the sign spans the column instead of sitting small at the left. */
  .sign { width: 100%; aspect-ratio: 5 / 4; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Works with: the four agents, monochrome */
.agents, .how { margin: 0 clamp(20px, 4vw, 36px) 16px; padding: 16px 18px 18px; }
.agent-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.agent-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-size: 13px; }
.agent-list svg { width: 22px; height: 22px; flex: none; fill: currentColor; color: var(--text); }
.agent-list .any { color: var(--muted); border-style: dashed; }
.agent-list .any svg { fill: none; color: var(--muted); }
@media (max-width: 720px) { .agent-list .any { grid-column: 1 / -1; } }

/* How it works: a real sequence, so it is numbered */
.steps { list-style: none; margin: 6px 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.steps li:last-child { border-bottom: 0; padding-bottom: 2px; }
.steps .n { color: var(--faint); font: 10px/22px var(--mono); letter-spacing: .06em; }
.steps h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 22px; }
.steps p { margin: 4px 0 0; max-width: 68ch; color: var(--muted); font-size: 13px; line-height: 1.65; }
.facts { margin-bottom: 0; }