:root {
 /* original color scheme: 
 --bg:#0f172a;
 --panel:#0b1229;
 --text:#f8fafc;
 --muted:#cbd5e1;
 --brand:#22c55e;
 --accent:#38bdf8;
 */
 --bg:#4B2E2A;
 --bg-light: #803d34;
 --primary:#6A8E3C;
 --primary-hover: #35471d;
 --secondary: #E6C46E;
 --panel:#0b1229;
 --text:#f8fafc;
 --muted:#cbd5e1;
 --accent:#38bdf8;
}

* {
box-sizing:border-box 
}

html {
scroll-behavior:smooth;

}

body {
margin:0;
font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Inter, "Helvetica Neue", Arial, sans-serif;
background:linear-gradient(180deg,var(--bg),var(--bg-light) 50%,#271808);
color:var(--text) 
}

a {
color:inherit;
text-decoration:none 
}

.container {
max-width:1200px;
margin-inline:auto;
padding:0 20px 
}

header {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(15,23,42,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

nav {
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand {
  display:flex;
  gap:10px;
  align-items:center;
}

.logo {
width:34px;
height:34px;
border-radius:10px;
background:url('img/logo-64.png') center/cover no-repeat;
box-shadow:0 0 0 2px rgba(255,255,255,.08) 
}

.brand h1 {
font-size:18px;
margin:0;
font-weight:800 
}

.menu {
display:flex;
gap:16px;
font-size:14px 
}

.menu a {
opacity:.9 
}

.menu a:hover {
opacity:1;
color:var(--primary) 
}

.lang {
display:flex;
gap:6px 
}

.lang button {
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
}

.lang button[aria-pressed="true"] {
  background:var(--primary);
  color:#05240f;
  border-color:transparent;
}


.hero {
  position:relative;
  min-height:76vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.hero::before {
content:"";
position:absolute;
inset:0;
background:url('img/header.jpg') center/cover no-repeat;
opacity:.35 
}

.hero::after {
content:"";
position:absolute;
inset:0;
background:radial-gradient(1200px 600px at 70% 10%,rgba(34,197,94,.18),transparent 60%),radial-gradient(900px 500px at 0% 100%,rgba(56,189,248,.18),transparent 60%) 
}

.hero-inner {
position:relative;
z-index:1;
text-align:center;
display:grid;
gap:18px;
padding:80px 0 
}

.badge {
display:inline-block;
padding:6px 10px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
background:rgba(255,255,255,.06) 
}

.hero h2 {
font-size:clamp(26px,4.5vw,54px);
margin:0;
line-height:1.06 
}

.hero p {
max-width:860px;
margin:0 auto;
opacity:.95 
}

.actions {
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap 
}

.btn {
display:inline-flex;
gap:8px;
align-items:center;
padding:10px 16px;
border-radius:12px;
border:1px solid rgba(255,255,255,.16);
background: var(--primary);
color:#05240f;
}

.btn:hover {
background: var(--primary-hover);
border-color:rgba(255,255,255,.28);
color:#fff;
}

.btn.cta {
background:var(--primary);
color:#05240f;
border-color:transparent;
font-weight:800 
}


section {
padding:70px 0;
border-top:1px solid rgba(255,255,255,.06) 
}

h3 {
margin:0 0 8px;
font-size:28px 
}

.sub {
opacity:.78;
margin:0 0 22px 
}

.grid {
display:grid;
gap:18px 
}

.grid-2 {
grid-template-columns:repeat(2,1fr) 
}

.grid-3 {
grid-template-columns:repeat(3,1fr) 
}

@media (max-width:900px) {
.grid-2,.grid-3 {
grid-template-columns:1fr 
}
 
}


.card {
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px 
}

.card h4 {
margin:6px 0 4px 
}

.card p {
margin:0 0 8px;
opacity:.92 
}

.pill {
display:inline-block;
font-size:12px;
padding:4px 8px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
background:rgba(255,255,255,.04);
margin-right:6px 
}


.filters {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:12px 
}

.filters select,.filters input {
padding:10px 12px;
background:rgba(17,24,39,.6);
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
color:var(--text) 
}


.thumb {
height:170px;
border-radius:14px;
background:#0b1229 center/cover no-repeat;
margin-bottom:10px 
}

.meta {
display:flex;
gap:10px;
flex-wrap:wrap;
font-size:13px;
opacity:.85 
}

.meta span {
display:inline-flex;
gap:6px;
align-items:center 
}


.map {
height:380px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
overflow:hidden 
}


footer {
padding:40px 0;
color:#cbd5e1;
font-size:14px 
}

.tiny {
font-size:12px;
opacity:.75 
}