/* Harta Dezvoltatori — SEO pages (sectors, zones, Ilfov towns, /despre/).
   Shares the tokens and the three faces of the map (Instrument Serif display,
   IBM Plex Sans interface, IBM Plex Mono numbers). Light only, to match the map.
   The map at / is the tool; these are the crawlable, readable directory pages. */

:root{
  --ground:#FAF9F7; --paper:#FFFFFF; --ink:#14161C; --ink-2:#4A5160; --ink-3:#8A91A0;
  --line:#E4E1DA;
  --build:#C2410C; --build-soft:#FDE8D7;
  --done:#0F766E; --done-soft:#D8EFEC;
  --unknown:#64748B; --unknown-soft:#E7EAEF;
  --r:14px;
  --font-display:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --font-body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--done); text-decoration:none}
a:hover{text-decoration:underline}

article,.prose{max-width:760px; margin:0 auto; padding:0 16px}
.crumbs{max-width:760px; margin:20px auto 0; padding:0 16px; font-size:13px; color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs span{color:var(--ink-2)}

h1{
  font-family:var(--font-display); font-weight:400; letter-spacing:-.01em;
  font-size:38px; line-height:1.1; margin:18px 0 6px;
}
h2{
  font-family:var(--font-display); font-weight:400; letter-spacing:-.01em;
  font-size:26px; line-height:1.2; margin:34px 0 12px;
}
h3{font-family:var(--font-body); font-weight:600; font-size:16px; margin:0}

.byline{font-size:13px; color:var(--ink-3); margin:0 0 20px}
.byline a{color:var(--ink-2)}
.lead{font-size:18px; line-height:1.55; color:var(--ink-2); margin:0 0 22px}
.lead b{color:var(--ink); font-weight:600}

/* ---- stat strip: the derived numbers (information gain) ---- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; list-style:none; margin:0 0 22px; padding:0;
}
.stats li{background:var(--paper); padding:13px 15px; display:flex; flex-direction:column; gap:3px}
.s-k{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}
.s-v{font-family:var(--font-mono); font-weight:500; font-size:17px; color:var(--ink)}

.cta{margin:0 0 26px}
.btn{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line); border-radius:10px; padding:11px 16px;
  font-size:15px; color:var(--ink); background:var(--paper);
}
.btn:hover{background:var(--ground); text-decoration:none}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.primary:hover{background:#000}

/* ---- project listing ---- */
.projects{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pr{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; display:flex; flex-direction:column; gap:5px;
}
.pr-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.pr-head h3{order:2}
.badge{
  order:1; display:inline-block; border-radius:999px; padding:3px 9px;
  font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
.badge.build{background:var(--build-soft); color:var(--build)}
.badge.done{background:var(--done-soft); color:var(--done)}
.badge.unknown{background:var(--unknown-soft); color:var(--unknown)}
.pr-dev{font-size:13.5px; color:var(--ink-2)}
.pr-addr{font-size:13px; color:var(--ink-3)}
.pr-yr{font-size:12.5px; color:var(--build); font-family:var(--font-mono)}
.p-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:3px}
.p-tot{font-family:var(--font-mono); font-weight:500; font-size:16px; color:var(--ink)}
.p-tot.p-ask{color:var(--ink-3); font-weight:400}
.p-sqm{font-family:var(--font-mono); font-size:13px; color:var(--ink-2)}
.pr-links{display:flex; gap:14px; margin-top:6px; font-size:13.5px}
.pr-site{color:var(--done)}
.pr-map{color:var(--ink-2)}

/* ---- FAQ ---- */
.faq{margin-top:36px}
.qa{border:1px solid var(--line); border-radius:10px; background:var(--paper); margin-bottom:8px; padding:0 15px}
.qa summary{cursor:pointer; padding:13px 0; font-weight:500; list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; float:right; color:var(--ink-3); font-family:var(--font-mono)}
.qa[open] summary::after{content:"−"}
.qa>div{padding:0 0 14px; color:var(--ink-2); font-size:15px}

/* ---- prose (despre) ---- */
.prose p{margin:0 0 14px; color:var(--ink-2)}
.prose h2{font-size:23px}

/* ---- related + footer mesh ---- */
.related{margin-top:34px; padding-top:18px; border-top:1px solid var(--line)}
.related p{color:var(--ink-2); line-height:2}
.mesh{
  max-width:760px; margin:44px auto 0; padding:26px 16px 40px;
  border-top:1px solid var(--line); font-size:14px;
}
.mesh nav{margin-bottom:16px}
.mesh h2{font-family:var(--font-body); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); margin:0 0 6px; font-weight:600}
.mesh p{margin:0; color:var(--ink-2); line-height:1.9}
.mesh-home{margin-top:20px!important; font-size:15px}
.mesh-home a{color:var(--ink)}
.mesh-legal{margin-top:14px!important; font-size:12px; color:var(--ink-3)}

@media (max-width:560px){
  h1{font-size:30px}
  .lead{font-size:16px}
  body{font-size:15px}
}