@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --graphite:#14181C;
  --graphite-soft:#1D2227;
  --concrete:#EAEAE4;
  --concrete-line:#D3D3CB;
  --amber:#C68E17;
  --steel:#4A6B85;
  --white:#FAFAF7;
  --radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--concrete);
  color:var(--graphite);
  font-family:'Inter',sans-serif;
  line-height:1.5;
}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3,.display{
  font-family:'Archivo',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--graphite);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.grid-lines{
  background-image:
    linear-gradient(var(--concrete-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--concrete-line) 1px, transparent 1px);
  background-size:40px 40px;
}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  background:var(--concrete);
  border-bottom:1px solid var(--concrete-line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:1180px;margin:0 auto;
}
.logo{
  font-family:'Archivo';font-weight:700;font-size:1.15rem;
  letter-spacing:0.02em;
}
.logo span{color:var(--amber);}
nav{display:flex;gap:28px;align-items:center;}
nav a{font-size:0.9rem;font-weight:500;color:var(--graphite-soft);transition:color .15s;}
nav a:hover{color:var(--amber);}
.lang-toggle{
  display:flex;border:1px solid var(--graphite);border-radius:var(--radius);overflow:hidden;
  font-family:'IBM Plex Mono';font-size:0.75rem;
}
.lang-toggle button{
  background:none;border:none;padding:6px 10px;cursor:pointer;color:var(--graphite);
}
.lang-toggle button.active{background:var(--graphite);color:var(--concrete);}

/* Hero */
.hero{
  background:var(--graphite);color:var(--white);
  padding:100px 24px 80px;position:relative;overflow:hidden;
}
.hero .wrap{position:relative;z-index:2;}
.hero-eyebrow{
  font-family:'IBM Plex Mono';font-size:0.8rem;color:var(--amber);
  letter-spacing:0.08em;text-transform:uppercase;margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;color:var(--white);max-width:820px;
}
.hero p.lead{
  margin-top:24px;max-width:560px;color:#B8BEC4;font-size:1.05rem;
}
.hero-stats{
  display:flex;gap:48px;margin-top:56px;flex-wrap:wrap;
  border-top:1px solid #2A3038;padding-top:28px;
}
.stat .num{font-family:'Archivo';font-size:1.8rem;font-weight:600;color:var(--amber);}
.stat .label{font-family:'IBM Plex Mono';font-size:0.72rem;color:#8A9096;text-transform:uppercase;letter-spacing:0.06em;margin-top:4px;}

/* Map coordinate motif */
.coord-field{
  position:absolute;inset:0;opacity:0.35;pointer-events:none;
}
.coord-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;background:var(--amber);
}
.coord-dot::after{
  content:attr(data-label);position:absolute;left:12px;top:-4px;
  font-family:'IBM Plex Mono';font-size:0.65rem;color:#6B7278;white-space:nowrap;
}

/* Section */
section{padding:64px 24px;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;flex-wrap:wrap;gap:16px;
}
.section-head .eyebrow{
  font-family:'IBM Plex Mono';font-size:0.75rem;color:var(--steel);text-transform:uppercase;letter-spacing:0.08em;
}
.section-head h2{font-size:1.8rem;margin-top:6px;}

/* Listing spec-sheet card */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--concrete-line);border:1px solid var(--concrete-line);}
.listing-card{
  background:var(--concrete);padding:0;position:relative;transition:background .15s;
}
.listing-card:hover{background:var(--white);}
.listing-card .img{aspect-ratio:4/3;overflow:hidden;background:#D8D8D0;position:relative;}
.listing-card .img img{width:100%;height:100%;object-fit:cover;}
.listing-card .ref{
  position:absolute;top:10px;left:10px;background:var(--graphite);color:var(--amber);
  font-family:'IBM Plex Mono';font-size:0.7rem;padding:3px 8px;letter-spacing:0.03em;
}
.listing-card .body{padding:20px;}
.listing-card h3{font-size:1.05rem;margin-bottom:8px;}
.listing-card .meta{
  display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:0.78rem;
  color:var(--steel);border-top:1px solid var(--concrete-line);padding-top:10px;margin-top:12px;
}
.listing-card .price{color:var(--graphite);font-weight:500;}

/* Buttons */
.btn{
  display:inline-block;padding:12px 22px;font-family:'IBM Plex Mono';font-size:0.82rem;
  border:1px solid var(--graphite);color:var(--graphite);letter-spacing:0.03em;cursor:pointer;background:none;
  transition:all .15s;
}
.btn:hover{background:var(--graphite);color:var(--concrete);}
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--graphite);}
.btn-primary:hover{background:#B07F14;border-color:#B07F14;color:var(--graphite);}

/* Filters */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.filter-bar button{
  font-family:'IBM Plex Mono';font-size:0.78rem;padding:8px 14px;border:1px solid var(--concrete-line);
  background:var(--white);cursor:pointer;color:var(--graphite-soft);
}
.filter-bar button.active{border-color:var(--graphite);background:var(--graphite);color:var(--concrete);}

/* Footer */
footer{background:var(--graphite);color:#8A9096;padding:48px 24px 28px;margin-top:80px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
footer .col{display:flex;flex-direction:column;}
footer .col h4{color:var(--concrete);font-size:0.85rem;margin-bottom:12px;font-family:'IBM Plex Mono';text-transform:uppercase;letter-spacing:0.06em;}
footer a{font-size:0.85rem;display:block;margin-bottom:6px;color:#8A9096;}
footer a:hover{color:var(--amber);}
.foot-bottom{
  max-width:1180px;margin:36px auto 0;padding-top:20px;border-top:1px solid #2A3038;
  font-family:'IBM Plex Mono';font-size:0.72rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* Forms */
input,textarea,select{
  font-family:'Inter';font-size:0.9rem;padding:10px 12px;border:1px solid var(--concrete-line);
  background:var(--white);width:100%;color:var(--graphite);
}
label{font-family:'IBM Plex Mono';font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--steel);display:block;margin-bottom:6px;}
.field{margin-bottom:18px;}

/* Detail page */
.detail-hero{background:var(--graphite);color:var(--white);padding:48px 24px;}
.detail-gallery{display:grid;grid-template-columns:2fr 1fr;gap:2px;background:var(--concrete-line);}
.detail-gallery img{width:100%;height:100%;object-fit:cover;}
.spec-table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono';font-size:0.85rem;}
.spec-table tr{border-bottom:1px solid var(--concrete-line);}
.spec-table td{padding:12px 0;}
.spec-table td:first-child{color:var(--steel);width:180px;}

@media(max-width:720px){
  nav{display:none;}
  .hero{padding:70px 20px 50px;}
  .detail-gallery{grid-template-columns:1fr;}
}